TechLabs

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

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을 지정..

html, css를 이용하여 싸이월드 양식 만들기 1. html 작성하기 전에 어떻게 구조화 되어 있는지 파악하기. 하이픈을 이용하여 부모 박스와 연관되어 있는 경우를 표기하기. 2. 바깥에서 안으로, 위에서 아래로 천천히 css 적용하기. padding 먼저 적용해보고, 잘 안되는 경우에 margin 이용해보기. padding을 이용하는 경우에는 부모 박스를 이용하자. 3. html 위치 조정할 때 시각적으로 잘 보이지 않기 때문에 background-color를 설정하여 css 적용이 잘 보이도록 만든다. 4. 절대적인 길이와 상대적인 길이가 있는데 상대적인 길이는 부모 박스에서 영향을 받는다. (예시 : % 기호는 상대적인 길이이다. 부모 박스의 길이에 따라 자식 박스의 길이가 달라진다.) 완성된 ..

html로 회원가입 양식 만들기 1. input에는 여러 가지 속성과 값이 존재한다. 잘 조합하여 이용하면 원하는 모양을 만들 수 있다. 2. inline인 경우에는 을 이용하여 강제 줄바꿈을 실행한다. 나중에는 굳이 이렇게 하지 않아도 된다. css를 이용하여 원하는 모양으로 맞춰줄 수 있기 때문이다. 3. 종속 태그인 select와 option을 이용하고 속성과 값을 이용하여 원하는 모양을 만들 수 있다. 완성된 회원가입 양식 html로 웹사이트를 구조화하는 경우 태그의 고유한 역할에 잘 파악하여 이용해주자.