HB HB

1. form 태그 오늘은 html로 작성한 각각의 페이지들이 어떻게 연결되고 동작하는지를 배웠다. 1-1. 게시판 메인 페이지 먼저 간단한 게시판 형식의 페이지를 만들었다. 일반적으로 게시판을 사용할 때 필요한 동작은 다음과 같다. 1. 로고를 눌러서 메인화면(게시판목록화면)으로 돌아가기 2.각 게시물의 제목을 눌러서 해당 게시물로 들어가기 3. 글쓰기 버튼을 눌러서 작성화면으로 들어가기. 각 페이지에 해당하는 html을 만들고 엘리먼트를 사용하여 링크를 걸어주면 페이지 간의 이동이 가능하다. 첫 시간에 웹브라우저는 크게 주소를 입력하는 영역과 화면을 랜더링해주는 영역으로 나뉜다고 배웠다. 오늘은 지금까지 신경쓰지 않았던 주소를 입력하는 네트워크 영역을 자세히 알아보도록 하겠다. 첫 화면의 주소는 다음..

1. 팝업창 만들기 1-1. 팝업창 설정 html 등록하기 팝업창 내 컨텐츠 영역 어제와 마찬가지로 input - label - div 세트를 만들어준다. #layerPopup{ display: none; } #layerPopup + label{ display: inline-block; background: #333; padding: 7px 14px; color: #fff; } #layer_bg{ display: none; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0,0,0,0.5); } #layerPopup:checked + label + #layer_bg{ display: block; } #..

0. 목차 1. Hamberger Icon 애니메이션 2. 메뉴목록 나오게하기 3. clear:both; 4. 참고 사이트 1. Hamberger Icon 애니메이션 위에 보이듯 수평막대 3개로 이루어진 아이콘을 '햄버거 아이콘(버튼)'이라고 부른다. 페이지 내에서 화면을 접어두고 펼치는 동작을 수행하는데 주로 사용한다. 이 버튼을 만들기 위해서는 1. 2. - 아이콘용 3. 이렇게 3개가 한 세트라고 볼 수 있다. html과 css 코드를 먼저 확인해보겠다. 1. html menu1 menu2 menu3 menu4 2. 아이콘의 위치와 모양을 잡아주기 #check{ display: none; } #hamberger{ width: 50px; height: 30px; position: relative; c..

0. 목차 1. 실습 개요 2. 새로 배운 것 2-1. 백그라운드 이미지 2-2. a:hover 3. 에러 기록 3-1. 부모요소와 자식요소의 size 상속 3-2. 화면 축소 시의 레이아웃 깨짐 1. 실습 개요 이걸 html로 나누면 크게 이렇게 된다 예전에 설계를 할 때 부품표를 만들던 걸 참고해서 전체 구성을 정리해봤다. 웹페이지에도 이런 식으로 나누는 걸 잘 쓰는지는 모르겠지만 이렇게 화면만 보고 한번 정리를 해보면 초보일 때 html 구조를 짜는 것도 좀 익숙해지고 CSS에서 어떤 속성을 어떻게 배치할 지가 조금 머릿속에서 정리가 되어 나는 이 방식이 좋은 것 같다. 그리고 같은 계층인 엘리먼트들이 한눈에 보여서 혹시 결과물에 오류가 있을 때 어디를 수정하면 좋을 지도 좀 더 쉽게 알 수 있었다..

0. 목차 1. 페이지 개요 - HTML구조 2. 1일차 (float속성과 position속성) 2-0. CSS 기본 설정 2-1. header부 2-2. visual부 3. 2일차 3-2. content부 4. 3일차 - 1. 페이지 개요 이 화면의 구성은 크게 1. 로고와 메뉴가 있는 헤더부 2. 사진과 사진메뉴가 있는 비주얼부 로 나눠진다. 이걸 HTML의 구성으로 바꾸어보면 이런 구조로 나타낼 수 있다. 오늘 새로 배운 float과 position을 위주로 css를 정리해보았다. 2. 1일차 2-0. CSS 기본 설정 CSS 파일을 작성하기에 앞서 가장 먼저 설정해 주면 좋은 것 * { margin:0; padding:0; } ul, li{ list-style: none; } a{ text-dec..

0. 목차 1. CSS란? 2. CSS를 적용하는 3가지 방법 2-1. 인라인 스타일 2-2. 위와 같이 태그를 작성한다. 예시코드에서 볼 수 있듯이 에서 엘리먼트에 부여한 선택자에 따라 조금씩 작성방법이 다른데, id는 #(ID명) { } class는 .(class명) { } 해당 엘리먼트 전체를 선택자로 쓴다면 (엘리먼트명) { } 모든 엘리먼트에 스타일을 입힐 땐 * { } 로 쓸 수 있다. 또한 리스트1 리스트2 리스트3 리스트4 리스트1 리스트2 리스트3 리스트4 이런 엘리먼트 내부의 엘리먼트에도 각각 지정이 가능한데, 내부의 모든 에 css를 적용할 땐 ul > li { } menu2 클래스를 가진 내의 에만 css를 적용할 땐 .menu2 > li { } 로 쓸 수 있다. 2-3. 외부파일 ..

목차 1. 개발도구준비 2. 브라우저와 웹 3. HTML 기초 - 엘리먼트와 속성 3-1. HTML의 구조 3-2. 자주 사용하는 엘리먼트 3-3. 엘리먼트에 속성주기 4. html 파일 작성 시 유의할 점 개발도구준비 비주얼스튜디오코드 사용 + 확장프로그램으로 Korean, live server 설치 비주얼스튜디오코드란? 코드를 쓰는건 텍스트를 저장하는 기능을 가진 어디서든지 다 가능하나, 코딩 시 사용하는 단어들 자동완성 + 그 외 여러가지 기능으로 코드작성을 쉽게 할 수 있도록 기능을 강화시킨 편집기(메모장) Extension 탭에서 다양한 확장프로그램 설치 가능 브라우저와 웹 브라우저란? 웹 정보를 화면에 표시해주는 응용프로그램 (ex. 크롬, 사파리, 파이어폭스...) 브라우저는 크게 1. 주소..