TechLabs

1. Flex item이 여러 줄인 경우에는 어떻게 적용? 앞에서 봤던 grid처럼 flex도 여러 줄 css 적용이 가능하다. 그런데 어떻게 적용해야 할까? 강제 개행을 시켜줘야 한다. align-items 대신에 align-content 이용하기. (참고) flex-flow를 이용하여 단축 속성을 이용할 수 있다. 위의 3가지를 잘 이용하면 grid처럼 여러 줄 flex 적용이 가능하다. 2. flex-wrap으로 강제 줄 바꿈 적용하기 - flex-wrap 은 가로의 길이에 따라 강제 줄 바꿈을 적용할 것인지 아닌지 결정하는 속성이다. 위의 그림은 flex-wrap이 nowrap인 경우다. 분명 각각의 박스의 가로 너비를 300px로 지정하였으나, 무시하고 한 줄에 적어버리는 것을 볼 수 있다. 그..

1. Flex이란? - 중심축을 기준으로 화면 위에서 정렬하는 것을 의미한다. - 정렬 중에서 space 관련 정렬이 있는데 미묘하지만 차이를 잘 알아두기.

1. html 구조 파악하기 위의 그림을 기준으로 더 세분화하였다. container 안에 wrapper를 넣어서 조정하는게 훨씬 flex를 다루기에 편리하다. 2. html 코드 위의 그림 기준으로 html 코드를 생성하였다. 3. css 코드 위에서부터 아래로, 큰 부분부터 작은 부분으로 css 코드를 생성하였다. 4. javascript 코드 추가해야 하는 기능 기능 구현 여부 휴대전화 3 - 4 - 4로 구현하기. 앞 칸이 모두 채워지면 다음 칸으로 커서가 이동하도록 하기. O 휴대전화 모두 입력하면 인증번호 전송 버튼이 활성화되고, 버튼 누르면 인증번호 보여주기. 3분 타이머도 실행하기. O 휴대전화 모두 입력 시 인증번호 전송 버튼 활성화 제외 인증확인 버튼 활성화하기. 3분 이내에 버튼 누르..

precamp의 내용을 바탕으로 더 추가하여 나만의 싸이월드를 생성하였다. 나만의 싸이월드 제작하기 1. 싸이월드 전체 구조화하기. 2. 싸이월드 왼쪽 박스 제작하기. 3. 싸이월드 오른쪽 박스에서 Home 박스 제작하기. 4. 싸이월드 오른쪽 박스에서 Game 박스 제작하기. 5. 싸이월드 오른쪽 박스에서 JukeBox 박스 제작하기. 6. 버튼 생성하고, 기능 추가하기. 1. 싸이월드 전체 구조화하기 나만의 싸이월드 만들기 전에 html로 웹페이지 구조화하기. 2. 싸이월드 왼쪽 박스 제작하기 - 구조화한 것을 바탕으로 id 값 지정하기. - background-color 이용하여 원하는 자리에 잘 넣어보기. - flex를 이용하는 경우에 부모 박스를 이용하여 자식 박스를 정렬함을 잊지 말기. 그래서..

html, css를 이용하여 싸이월드 양식 만들기 1. jukebox.html, jukebox.css에 표 형태 나와있는데, html에서 표 태그 이용하여 그려주면 된다. 2. border 경계 사이를 없애주는 속성을 사용하면 예제처럼 표현할 수 있다. border-spacing 3. navigation 버튼 만들 때, position을 이용하여 절대 위치로 위치 조정하기. 4. 태그의 속성의 값을 변경하고 싶은 경우, setAttribute(name, value) 를 이용하여 조정할 수 있다. 이벤트 감지하고, 그에 따라 변경할 때에 유용하게 사용된다. 5. 메뉴 버튼 클릭을 이용하여 원하는 페이지로 이동할 때에 함수의 개수 고민했었다. 3개가 필요하다. 한 버튼 당 하나씩 기능을 넣어주면 되기 때문이..

html, css를 이용하여 싸이월드 양식 만들기 1. (2)와 마찬가지로 iframe을 이용하여 game.html을 넣어주기. 2. space-between과 padding을 적절하게 이용하면 같은 px로 정렬 가능하다. 3. 자바스크립트에서 태그 가져와서 제어하는 경우에는 id를 사용한다. 4. 내용물이 있는 경우 background-color보다 border를 이용한다. 5. 굳이 이런 경우에는 wrapper-header, wrapper-body로 나누지 않아도 된다. wrapper-header, game-container x 2로 나누어도 된다. 완성된 싸이월드 양식

html, css를 이용하여 싸이월드 양식 만들기 1. 싸이월드 만들기 (1)에서 진행했던 것처럼 똑같이 오른쪽도 진행하면 된다. 2. 주의할 점은 부모 박스 만든 곳에 또 다른 내용이 들어가는 경우에 다시 한번 부모 박스로 감싸준다. 그렇게 만들어주는 것이 나중에 태그를 다루기가 쉬워진다. 3. 같은 형식을 보이는 경우에는 class를 지정하여 재활용하기. 오른쪽 박스를 보면 같은 형식을 보이는 것이 있다. (Updated news와 My Video 그리고 TODAT|Y STORY와 INTRODUCE MYSELF는 같은 형식을 보인다. 그러므로 각각 같은 class를 지정하여 css를 적용시켜준다.) 4. iframe을 이용하여 home.html을 넣어준다. iframe은 inline frame을 지정..

1. css 웹페이지에서 구조를 담당하고 있는 html의 색, 크기 등의 시각화를 담당한다. 주로 속성과 값으로 이루어져 있다. - 단일 속성 지정 : 1개의 속성과 값의 쌍을 의미한다. - 다중 속성 지정 : 2개 이상의 속성과 값의 쌍을 의미한다. 선택자{ 속성: 값; // 종료를 의미하기 때문에 반드시 적어주기 } css 지정 후 반드시 종료를 표기해야 한다. 아니면 문법적 오류가 뜬다. css 나타내는 방법 3가지 1. html 태그에 css 직접 입력하기 inline style 방식으로 style = "속성 : 값" 으로 표기하기. 유지 보수에 유리하지 않고, 관심사 분리가 안 된다. 즉 같은 언어끼리 묶이지 않고 있다는 의미이다. 2. head 태그 안에 style 태그 입력하기 style t..

flex를 이용한 회원가입 양식 정렬하기 1. content-box에서 border-box로 넘어가는 것이 css의 기본 원칙이다. 내용 제외한 모든 것의 변화에서 기본 웹 페이지 제외한 모든 것의 변화로 양식 조정하기. 2. flex는 반드시 부모 태그가 필요하다. 또한 대각선으로 이동 불가하니, 가로 또는 세로로만 이동해야 한다. 3. 상위 태그부터 천천히 정렬시켜주기. 나는 가장 상위 태그인 body부터 정렬해주었다. 4. flex 사용 시에 자식 태그들의 정렬에 따라서 가로, 세로의 방향이 달라질 수 있음을 유의하자. 완성된 회원가입 양식 + 입력이 필요한 부분을 div 태그로 설정하면 입력이 되지 않는다. 입력에서 사용하는 태그를 이용하자. 경계를 없애고 싶은 경우에는 border에서 고쳐주면 ..