$$config title: 철우의 웹공부 위키 keywords: - Web Design $$ # 수업 1일차 ``` # 윈도우 단축키 - CTRL+T: 탭 열기 - CTRL : PGUP /PGDN : 탭 이동하기 - F6: 주소 표시줄에 포거스 - Ctrl+w: 닫기 - Ctrl+END : 맨 마지막으로 이동 - Ctrl+HOME : 맨 처음으로 이동 - Shift+HOME/ END 활용 : 한줄 드래그 - HOME, END키 동일 줄 처음 끝 이동 - 되돌리기: Ctrl+Z, Ctrl+Y # Codepen 세팅 - https://codepen.io/settings/editor - FOnt: Hack으로 하기 Code Font Size: 16 Indent Width: 2 (들여쓰기) Editor Options > format On Save, Autocomplete 모두 체크 클릭 > Ctrl+S 저장되면서 반영됨 - 오른쪽 위 V 누르고, Format HTML 누르면 자동 정렬 됨 포맷: HTML 포맷으로 정렬해줌 # 웹페이지와 HTML, CSS, JS역할 - 웹페이지=HTML+CSS+JS - HTML 웹페이지 작성하는 역할 (배우) - CSS HTML을 꾸며주는 역할 (코디) - JS 인터렉션을 담당하는 역할 (감독) - 동작원리 <> 서브젝트 엘리먼트 => 위에는 2개 존재 배우 2명 어떻게 호환하나? CSS가 배우(서브젝트)를 찾아가서 만난다 # HTML 태크의미 - <> 이것을 엘리먼트라고 표현 - 엘리먼트 2개 예시 안녕하세요. 반갑습니다. 저는 23살, 홍길동입니다. 저는 율도국에서 국왕을 하다가. # 태크종류 및 공부법 - 태그 4가지만 기억 div, section, nav, article - 태그 속성은 크게 2가지만 기억하면 됨 - display, position만 배우면 끝 - 태그 공부법 : 사용법을 알고, 조합법을 알면 됨 (외우지 말기) - 입력법: div치고 tab 치기 - 여러개입력법: div+section+nav+article tab치기 # 작성법 예시 - html <'div>안녕<'/div> <'section>안녕2'<'/section> <'nav>안녕3<'/nav> <'article>안녕4<'/article> - css div{ background-color: red; width:200px; height:200px; } section{ background-color: gold; width: 100px; height:100px; } nav{ background-color: green; width:50px; height: 50px; } article{ background-color: blue; width: 25px; height: 25px; } # HTML 기본 명령어 - color:red; 글자색 - background-color:red; 배경색 - font-size:4rem 폰트사이즈 - rem은 배수 (4rem : 4배) (기존 크기의 X배) - width:500px 박스 너비 - width는 크기 지정안하면 늘어나는 성질 - height:300px 박스높이 - height는 줄어드는 성질 # html 기본 - html태그는 기본 4개만 기억 - 1) div - 2) section - 3) nav - 4) article # 글자사이즈 꾸미기 예제 - 폰트사이즈: font-size:100px; - 폰트굵기: font-weight: bold; - 자간조정: letter-spacing: -10px; - 색깔조정: color: rgba(0,0,0,1); 000 검정(RGB순서), 1은 투명도 조정 빨간색 255 0 0 1 초록 0 255 0 1 파랑 0 0 255 1 # rgba 활용법 - 색 조정: color: rgba(0,0,0,1)에서 조정 - 구글 활용: 구글에서 Color picker 검색해서 활용 이게 제일 좋음 https://www.google.com/search?q=color+pciker&oq=color+pciker&aqs=chrome..69i57.4619j0j7&sourceid=chrome&ie=UTF-8 - color:rgba(255,0,0,1);을 활용 할 수 있지만 - color:#FF0000; (16진수로도 표현 가능) -content { color:red; font-size:20px; background-color:gold; } subject { background-color:darkorange; color:blue; font-size:3rem; } # width 속성 - 지정안하면 최대로 늘어난다 - width: 100px; (100px로 됨) - width; 자동으로 전체 채움 # height 소성 - height; 지정안하면 height:auto;가 되어 디폴트 크기로 된다 - height: 10px; 10 크기로 됨 # display 속성정리 display:inline-block; display:block; - Inline-block,Inline 한줄에 최대한 여러개 나옴 Inline block에서 width 지정을 안하면 0으로 세팅되므로, 주의 width는 꼭 지정 필요 - block 블록들의 엔터효과 (줄바뀜), 스스로 mirgin-left, margin-right를 사용해 정렬 - 예외 a, img, span 엘리먼트는 기본적으로 display가 inline 이다. inline요소에는 width, height, margin, padding 속성이 제대로 적용되지 않는다. # 엘리먼트, 부모, 자식, 형제관계 - HTML은 부모, 자식, 형제 관계 밖에 없다. - 아래에서 엘리먼트는 5개가 있는 상태, 테이블에 자식은 1명, 테이블 손자는 3개 tr의 자식은 3명 만약 테이블과 동등한 위치가 있으면 형제관계라고 함 - <'table> <'tr> <'td><'/td> <'td><'/td> <'td><'/td> <'/tr> <'/table> - HTML에서 아래 치고 탭키 누르면 쉽게 확인 가능 table>tr*2>td*3 탭키 # display 속성정리 - block: 블록화, 너비최대화 - inline-block: 글자화, 너비최소화, 부모에게 한글자로 취급됨 # nbsp 공백 만들기 - npsp ``` # 수업 2일차 ``` Ctrl+P 위키에서 보기 모드 코드 적는법 ```css ```html 1. 테이블 만들기 table>tr*3>td*3 [tab] Table의 자식은 tr (행 수) tr의 자식은 td (열 수) 2.>의 의미는 부모자식 관계 +의 의미는 형제 관계 2.한꺼번에 만들기 table[border="1"]>tr*3>tr*3{내용} 잘 안될때, Ctrl+X > Ctrl+V 하면 다시 됨 2. 테이블 실제 구현 3. 강조 4. 실무에 맞게 나누기 5. 테그하는법 a누르고 탭 줄바꾸기:
열고 닫음 없음에 주의

저는 네이버가 좋아요.
하하
호호

6. 결과출력하기

bmx
네이버

7. 쉽게 작성하기 a[href="#"][target="_blank"]{bmx}+br*2+a[href="#"][target="_blank"]{네이버} *blank는 새창으로 띄우기 *+는 하나 더 하기 8. 네이버,카카오,구글 만들기 a[href="#"][target="_blank"]{네이버}+
+a[href="#"][target="_blank"]{카카오}+
+a[href="#"][target="_blank"]{구글}+
9. 띄어쓰기 : 후손선택자 > : 자식 선택자 EX) html

네이버로 이동

구글로 이동

다음으로 이동 css div a{ border:1px solid red; color: pink; } a{ color:red; } 10. 섹션별로 구역 나누어 적용하기 [html]

네이버

구글
다음 [css] div a{ color:black; font-size: 50px; } div2 a{ color:red; font-size: 100px; } div3 a{ color:blue; font-size: 150px; } 11. a와 span은 width, height, padding 등이 먹지 않는다. 따라서 block으로 바꾼 이후 작업해야 해

하하

div{text-align:right; dixsplay:block;} *inline-block하면 블록이 글자 범위로 줄어들어 버림 (중간 정렬이 의미가 없음) 따라서 display:block으로 해서 해야함. 또는 width를 width:500px 등으로 줘서 이 안에서 움직일 수 있음 12. div:hover 마우스가 올려졌을 때에만 동작 13. table>tbody>tr>th+td*3 ``` ``` ``` # 수업내용 3일차 (34강~) - display: inline-block - color: red # 띄어쓰기 - # 링크달기 ``` - BMX ```


내용1-1	내용1-2	내용1-3
내용2-1	내용2-2	내용2-3
내용3-1	내용3-2	내용3-3