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. Grid이란? - 레이아웃을 화면에 표시하는 방법 중 하나이다. flex와 많이 사용되기 때문에, 적절하게 상황에 맞게 사용하면 된다. 2. 바둑판 레이아웃 만들기 grid를 이용하여 바둑판 레이아웃을 설정할 수 있다. 이 때 grid-template-columns를 이용하면 된다. 정렬 방향을 열의 방향으로 설정하는 속성이다. auto auto auto 라고 설정하면 가로의 사이즈에 꽉 채워서 3개의 박스가 만들어지게 된다. 따라서 3 X 3 형태의 바둑판을 만들 수 있다. 3. 홈페이지 레이아웃 만들기 grid를 이용하여 홈페이지 레이아웃을 만들 수 있다. grid-template-areas와 grid-area를 이용하여 원하는 대로 배치가 가능하다. 주의할 점은 먼저 grid-area에 어떤 ..

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

레이아웃을 float를 이용하여 만든 양식 1. Layout이란? - 화면 위에서 구성 또는 배열하는 작업이다. - 반응형 웹에 적절하지 않아서 현재 잘 이용하지 않는 방식이다. 가끔 디자인을 강조할 때 사용한다. - float, flex, grid 순으로 발전해왔다. flex와 grid는 상황에 따라 혼용한다. 2. float 개념 float를 설정하면 바로 뒤에 있는 태그가 따라 들어온다. 헤더 안에 메뉴를 만들 때, display와 text-align을 적절하게 이용하면 가운데 정렬을 할 수 있다. 3. clearfix - float를 적용한 뒤에 바로 밑에 있는 태그가 딸려 올라온다. 이를 방지하기 위하여 clear 속성을 이용하는데, 더 편리하게 이용하게 하기 위하여 클래스 이름을 clearfi..

1. box-sizing - box-sizing : content-box - box-sizing : border-box content-box 내용을 기준으로 css 적용한다. border-box 박스의 테두리를 기준으로 css 적용한다. content-box로 css 지정하면 오류가 날 수 있기 때문에, 반드시 border-box로 변경한 뒤에 css 적용하기.

1. css란 무엇일까? 2. css 선택자 3. font 관련 css 4. in-line vs block 1. css란 무엇일까? - css는 cascading style sheet를 의미한다. 선택자 {속성 : 값} 인라인 방식 이용 html 태그 안에 style="속성 : 값" 유지 보수하기 어렵고, 가독성이 떨어진다. 태그 이용 css 많을 수록, 유지 보수하기 어렵다. 분리된 css 파일 연결 가장 많이 이용하는 방식이다. 유지 보수와 가독성에 유리하다. link 태그를 이용하여 분리된 css 파일을 연결시켜 준다. - rel : 파일과 어떤 관계인지 지정한다. stylesheet 라고 적어주기. - href : 파일 경로를 지정한다. 2. css 선택자 태그 선택자 태그로 선택하기. id 선택..

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로 나누어도 된다. 완성된 싸이월드 양식