고래씌

1. 시맨틱(Semantic, 의미) 태그 (의미있는 태그) - 기존 영역분할에 사용되었던 div, span 등의 태그들은 태그의 이름만 봤을 때는 나누었다. 라는 것 이외의 의미를 파악할 수 없음. ☞ 태그만 봤을 때 태그의 목적을 알 수 없어 id나 class를 반드시 추가해야 한다. - 이런 문제점을 해결하고자 태그의 이름만으로 어느정도 어떤역할을 하는지 알 수 있고 웹 접근성을 향상에 도움이 되는 시맨틱 태그가 추가됨(HTML5) ▶ [제공하는 태그] - header 태그 : 문서의 제목, 머리말 영역 - footer 태그 : 문서의 하단부분, 꼬리말, 정보작성 영역 - nav 태그 : 나침반역할(다른페이지 이동, 사이트 이동)의 링크 작성 영역 - main 태그 : 현재 문서의 주된 콘텐츠 작성..

☞ 이런 웹페이지를 만들려고 한다. 만들어 보거라. ☞ HTML 파일에 각각 따로 만들어 둔 뒤, 하나의 파일(html, css)로 합칠 예정 1. 검색창 ■ 15_검색창.html 의 body태그 ■ 15_검색창.html 의 style 태그 ▶ ① *{box-sizing: border-box;} => 박스의 크기를 테두리 기준으로 크기를 정한다. content-box : 콘텐트 영역을 기준으로 크기를 정한다. border-box : 테두리를 기준으로 크기를 정한다. initial : 기본값으로 설정한다. inherit : 부모 요소의 속성값을 상속받는다. ▶ ② .header > div:nth-of-type(1) { flex-basis : 15%;} .header > div:nth-of-type(2) {..

1. 2차원 변형 ▶ img태그는 원래 자신만의 width/height값을 가지고 있어서 한방향의 크기만 지정해도 남은 방향은 비율에 맞춰서 자동으로 저장된다. (width: auto, height : auto가 기본값) ▶ css 속성 작성시 크로스 브라우저(브라우저가 달라지는 경우) 처리방법 -ms- : 마이크로 소프트(IE, EDGE) -webkit- : 크롬, 사파리 -o- : 오페라 -moz- : 파이어폭스 ■ html 파일 2차원 변형 좌우로 움직이기 상하로 움직이기 대각선으로 움직이기 가로방향 확대/축소 세로방향 확대/축소 대각성방향 확대/축소 요소 회전 1) 좌우로 움직이기(transform 이용) ■ transform-style.css 파일 .trans-x-2d:hover{ -ms-tra..

1. 글꼴(폰트) 관련 스타일 1) font-size : 글꼴의 크기를 지정하는 속성 ■ 12_글꼴(폰트)관련스타일.html ■ font-style.css #size-test>li:nth-child(1){font-size:24px;} #size-test>li:nth-child(2){font-size:17pt;} #size-test>li:nth-child(3){font-size:150%;} #size-test>li:nth-child(4){font-size:1.5em;} ☞ 모두 같은 사이즈임 2) font-weight : 글꼴의 굵기(두께)를 지정하는 속성 - 숫자 : 100(얇음) ~ 900(두꺼움) : 100단위로 입력 가능 - normal : 폰트에 지정된 기본 두께(400) - bold : 굵게(7..

1. 글자 관련 스타일 1) color : 글자색을 지정하는 속성 ▶ 선택자 { color : 색상명(영문) | 16진수 숫자 rgb(#fff, #ffffff) | rgb(255, 255, 255) | rgba(255, 255, 255, 1) | hsl(360, 100, 100) | hsla(360, 100, 100, 1) * rgba에서 a는 투명도(0 : 투명, 1: 불투명) * hsl(색조, 채도, 밝기) * 6개의 색상 지정 방법은 색과 관련된 모든 css속성에서 사용 가능 } ■ 11_글자관련스타일.html ■ text-style.css #color-ul >li { font-size: 24px; font-weight: bolder; } #color-ul > li:nth-child(1){color..

1. item 전용 속성 1) order : item의 순서를 지정하는 속성 ▶ order : flex-container 내부 item의 순서를 지정하는 속성 (기본값 0, 정수, 양수/음수 사용 가능) ■ flexbox3.html item 전용 속성 order : item의 순서를 지정하는 속성 item1 item2 item4 item5 item3 ■ style.css(모두 import되어있다) div{ border: 1px solid black; box-sizing: border-box; } .item{ width: 75px; height: 75px; } .item1{background-color: red;} .item2{background-color: orangered;} .item3{backgro..

1. flex-container 전용 속성 1) flex-direction : maxi axis(중심축) 방향, 시작 / 끝 지정 - row(기본값) - row-reverse - colum - colum-reverse 2) flex-wrap : item이 한줄/여러 줄로 배치되게 지정 - nowrap(기본값) : 한줄로 배치, item의 크기가 변경 및 훼손될 수 있음 - wrap : 여러줄로 배치 - wrap-reverse : 여러줄로 배치(cross axis 방향 반대) 3) flex-flow : flex-direction + flex-wrap; 4) justify-content : main axis(중심축)을 기준으로 item 정렬 5) align-content : cross axis(교차축)을 기..

1. FlexBox - 요소의 정렬되는 방향, 순서, 요소간의 간격을 수치적으로 처리하지 않아도 알아서 유연하게 처리해주는 형식 ▶ Flexbox를 이용할 때 반드시 알아야되는 것 1) Flex-Container : 정렬이 필요한 요소를 감싸는 요소 item : 정렬을 적용할 요소 (flex-container와 item에 사용되는 flex 관련 css속성이 나누어져 있음) 2) Flexbox의 축 - 중심축(main axis) - 교차축, 반대축(cross axis) ■ HTML Flex Box item1 item2 item3 item4 item5 item6 item7 item8 item9 ■ CSS 파일(style.css) div{ border: 1px solid black; box-sizing: bo..

1. 배치 관련 스타일(position) : position은 요소의 위치를 지정하는 속성 ▶ position : relative; (상대적인) - 지정된 요소 내부에 다른 요소가 "상대적인" 위치를 지정할 수 있도록 기준이 되게 만드는 속성 - 내부에 작성되는 요소에 위치 지정시 top, bottom, left, right등의 속성을 사용할 수 있음 ▶ position : absolute; (절대적인) - 기본 요소의 배치 순서를 무시하고 지정된 위치에 요소를 배치한다 ▶ position : fixed; (고정된) - 항상 고정된 위치에 요소를 배치함(화면이 움직이든 말든 항상 같은 위치) ■ HTML first second third ■ css 파일 div{ border: 1px solid black..

1. 요소 정렬 스타일(float / clear) ▶ float(뜨다, 띄우다, 뜨는 물건) : 요소를 띄어서 좌/우로 정렬하는 속성 ▶ clear : float로 인해 띄워져 있는 상태를 해제하는 속성(float 사용시 겹침 문제가 발생하는데 이를 해결해주는 속성) ■ HTML 파일 DOCTYPE html> 9_레이아웃스타일3 요소 정렬 스타일(float / clear) 기본 형태 1 2 3 hello hello hello 4 5 float : left; 형태 1 2 3 hello hello hello 4 5 float : right; 형태 1 2 3 hello hello hello 4 5 ■ css 파일(기본형태) div{ border: 1px solid black; box-sizing: border..