flexbox는 상위요소인 flex container와 하위 자식요소인 flex item들로 구성됨 즉, item이 수평정렬할 요소들이면, 해당 요소를 감싸고 있는 부모요소로 flex container가 필수적임.
1) flexbox container 속성 display : flex container 정의 flex-direction : item들의 주축 (방향)을 설정 flex-wrap : item들을 1행 또는 복수행으로 배치하는 설정 flex-flow : flex-direction과 flex-wrap을 한번에 설정하는 단축속성 flex-flow : direction과 wrap값
justify-content : 가로기준 배치 방법 align-content : 수직정렬 방법 (각 행 마다 적용) align-items : 수직정렬 방법 (복수행이면 하나의 그룹처럼 적용)
2) flexbox item 속성 order : 배치순서 설정 flow-grow : item 너비 증가 비율 설정 flex-shrink : item 너비 축소 비율 flex-basis : item 기본 너비 설정 flex : 위의 3개를 한번에 설정 align-self : 요소하나하나 정렬
pixel/ viewport pixel : 화소 viewport : 화면상 표시 영역. meta viewport : 원하는 너비를 넣으면 해당 너비에 맞게 브라우저가 표시함. <meta name="viewport" content="width=320">
-> 다양한 디스플레이에 맞는 웹페이지 구현 1) html <meta name="viewport" content="width=device-width"> 2) css : 미디어쿼리 : 반응형 레이아웃 구현하기 위한 기술 * 기본 문법 @media media-type and (media-feature-rule){ //CSS코드 }
* media-type (미디어 유형) all print 프린트화면 screen 브라우저화면 speeach 음성
* media-feature-rule (미디어 조건) width viewport의 너비, *min-width, *max width 많이 사용 height viewport의 높이 device-width 디바이스의 물리적 너비 device-height 디바이스의 물리적 높이 *orientation 디바이스의 방향 (가로 = landscape, 세로 = portrait) apspect-ratio viewport의 가로세로 비율
3) position 속성 -static (default) 다른 태그와의 관계에 의해 자동으로 배치 - relative 원래 배치되어야하는 위치를 기준으로, 좌표로 지정 - absolute 가장 가까운 위치에 있는 position 속성이 relative인 부모 요소를 기준으로, left, right, top, bottom 값으로 요소 위치 지정 position 속성이 relative인 부모가 없으면 body를 기준으로 위치 - fixed (고정 위치) 화면에 보여지는 영역을 기준으로 특정 위치에 배치 (스크롤 해도 고정- 따라다님)
1) 폰트 변경 font-family : 브라우저 사용자의 시스템에 설치 되어있지 않거나 운영체제에 따라 원하는 결과가 안나올 경우가 있다. @font-face : 웹 폰트 사용. 웹 문서 안에 끌꼴 정보도 저장하여, 사용자가 접속하면 사용자 시스템에 글꼴 다운로드시켜 적용 font-size : 클자 크기 지정 : px | em | rem | ex | pt 단위로 지정가능 font - weight : 글자 굵기 지정 : normla | bold | border | lighter 100 200 400 400이 normal font - style : nomal | italic | oblique
2) 텍스트 스타일 color : 글자색 지정. 색상명 | rgb(0,256,0) | #00f text-decoration : 텍스트에 줄 표시 지정. none | underline | overline | line-through
3) 문단 스타일 text-align : 텍스트 정렬 left | right | center | justify..
4) 목록과 링크 스타일 list-style-type : 목록의 불릿과 번호 스타일 지정 none | disc | circle | square none | 1 | a | A.... 5) 색상과 배경 background-color : 배경색 지정 background-image : 배경이미지, url('이미지파일경로') 로 이미지 지정 background-attachment : 배경이미지 고정. scroll(default) | fixed * background : 속성값만 나열하여 한번에 적용
* css 크기 단위 px : 화소 단위, 해상도에 따라 상대적인 크기를 가짐 % : 백분율, 기정사이즈를 기반으로 상대적인 비율의 크기를 가짐 em : 배수 단위, 지정 사이즈를 기반으로 배수로 계산된 크기를 가짐. 16px -> 2em (32px)을 말함 : 중첩태그의 경우 바로 상위 태그의 값을 기준으로 배수가 괴어 주의가 필요함. rem : root em 으로, 최상위 요소 사이즈를 기준으로 함. 배수 단위 16px -> 1rem = 16px, 2rem = 32px, 1.5rem ->24px....
* css 색상표현 단위 1) 색상이름 표기 : https://www.w3schools.com/colors/colors_names.asp 2) 16진수 표기 :#ffffff 같이표기/ #fffff -> #fff 같은값반복이면 생략가능 #22FF55 ->#2F5 # 8A 2B E2 빨 녹 파 / 각 두자리가 16진수의 빨녹파 값 3) RGB표기 : rgb(120,43,68) 4) RGBA 표기 : rgba(12,44,67,0.5) RGB+alpha (투명도) 0.0-> 투명 투명도 지정 속석 opacity : CSS제공 속성. 상속함 rgba는 상속안함
6. 박스모델 1) 블록 레벨 : 요소 하나가 혼자 한 줄 다 차지하는 요소. 박스형태 p, h, ul, ol, div, form, table 등 2) 인라인 레벨 : 혼자 한줄 차지하지 않는 요소 img, br, span, input, textarea, button 등 3) display : 화면 배치 방법 결정 none : 화면에 표시 하지 않음 block : 블록 레벨로 지정 inline : 인라인 레벨로 지정. 한 줄로 배치 가능한데, 너비나 높이, 마진 같은 박스 모델값이 정확히 적용 안될 수 도 있다. inline-block : 인라인 레벨요소이면서 블록레벨 속성을 갖도록 지정하는 것 4) border : 테두리 border-width, border-color 등 속석이 분리 적용하게 있다. 간단하게는 border : 두께 스타일 색상와 같이 한번에 적용가능. 그 외 border-top/-left/-right/-bottom, border-top-left-radius
5) 여백 margin : 요소의 바깥 여백 값 1개 : 상하좌우, 값 2개 : 상하 좌우, 값 4개 : 상 우 하 좌 padding : 콘텐츠와 테두리 사이 여백, margin과 적용방법 같음
--- HTML 네이밍 해줄 수 있는 속성--- 태그명 name 속성 : form안에 input태그에 기술해서 데이터 넘길때 많이 사용. 이름 붙히는 느낌 (css에서 다른 속성을 더 많이 사용) class 속성 : 다른 태그들과 값이 같아도 된다 -> 그루핑 역할 해줄때 사용 id 속성 : 문서내에서 유일한 값을 가져야함. 태그에 아이디 부여(사람= 주민번호)
1) 전체 선택자 : * 모든 요소에 스타일 적용 * { 속성명 : 값;...}
2) 태그 선택자 : 태그명 해당 태그에 모두 적용 태그명 { 속성명 : 값;...}
3) *class 선택자* : .class속성값 특정 부분에 스타일 적용. class 속성값이 동일한 태그들에 적용 그룹처럼 지정해서 적용할때 사용. <h1 class="hello">... .hello { 속성명: 값; ...}
4) id 선택자 : #아이디속성값 특정 태그에(요소)에 스타일 적용. id 값은 문서내에서 유일해야하므로 유일한 특정 한개의 요소에만 적용 할 때 사용. <h2 id="test">... #test { 속성명 : 값;....}
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>CSS</title><style>
* {margin: 10; padding: 0} /* 1) 전체선택자 */h1 {color: red;} /* 2) 태그 선택자 */p{color: blue}
.lorem{color: grey; font-size: 30px} /* 3) 클래스 선택자 */#container{ /* 4) ID 선택자 */background-color: turquoise;
width: 300px;
height : 200px;
margin: 0 auto;
}
</style></head><body><h1> Hello HTML </h1><h1> Hello CSS </h1><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum cupiditate eum reiciendis possimus? Voluptates similique repellat, dolore architecto veniam, vel placeat tenetur! Repellat facere aperiam porro quod saepe accusamus qui?
</p><pclass="lorem">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum cupiditate eum reiciendis possimus? Voluptates similique repellat, dolore architecto veniam, vel placeat tenetur! Repellat facere aperiam porro quod saepe accusamus qui?
</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum cupiditate eum reiciendis possimus? Voluptates similique repellat, dolore architecto veniam, vel placeat tenetur! Repellat facere aperiam porro quod saepe accusamus qui?
</p><pclass="lorem">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum cupiditate eum reiciendis possimus? Voluptates similique repellat, dolore architecto veniam, vel placeat tenetur! Repellat facere aperiam porro quod saepe accusamus qui?
</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum cupiditate eum reiciendis possimus? Voluptates similique repellat, dolore architecto veniam, vel placeat tenetur! Repellat facere aperiam porro quod saepe accusamus qui?
</p></body></html>
5) 여러 선택자 동시 적용 : 쉼표를 구분자로 나열하여 적용
선택자, 선택자 {...}
6) 스타일 적용 우선순위 1) 인라인 스타일 > id스타일 > class 스타일> 태그 스타일 2) 코드 순서 : 나중에 기술한것이 적용 *스타일 상속 : 부모 태그에 적용된것은 자식 태그도 적용됨. ex) body 태그에 폰트적용하면 그 안에 있는 태그들도 모두 적용
7) 연결 선택자 - 하위 선택자 : 띄어쓰기 구분자로 선택자 나열 상위 선택자 하위선택자 {...}
- 자식 선택자 : >를 구분자로 하위 요소 전체가 아니라 바로 아래 자식요소만 적용 부모선택자 > 자식선택자 {...}
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Selector</title><style>#container > ul{border: 1px solid red;} /* > 를 사용하여 바로 아래자식인 ui에게 만 사용 */</style></head><body><divid="container"><h1>Hello CSS in container</h1><ul><!-- 여기에만 적용됨 --><li> list1
<ul><!-- 여기는 적용 안됨 --><li>list1-1</li><li>list1-2</li></ul></li><li> list2
<ul><!-- 여기도 적용 안됨 --><li>list2-1</li><li>list2-2</li><li>list2-3</li><li>list2-4</li></ul></li></ul></div></body></html>
- 인접 형제 선택자 : +를 구분자로 기술. 가장 가까운 형제 요소. 선택자 + 선택자 {...} (형) (아랫동생) - 형제 선택자 : ~을 구분자로 기술. 인접과 달리 형 다음에 붙은 모든 형제 요소에 적용. 선택자 ~ 선택자 {...} (형) ~ (동생들)
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Selector</title><style>h1+ul{color: blue; font-weight: bold;} /* + 를 사용하여 h1 과 가장가까운 형제에게만 적용 */</style></head><body><ul><li>list1-1</li><li>list1-2</li></ul><h1>Hello CSS</h1><!--h1이 여기 있으니 그 바로 밑 형제들만 적용됨 --><li>list2-1</li><li>list2-2</li></ul><ul><li>list3-1</li><li>list3-2</li><li>list3-2</li></ul></body></html>
h1이 2-1 위에 있을때h1이 1-1 위에 있을때선택자 ~ 를 사용했을때 h1~ul
8) 속성 선택자 - 속성명 : 지정한 속성을 가진 요소 찾아 적용 선택자[속성]{...} p[class] - 속성값 : 속성명에서 나가아 속성의 값이 일치하는 요소를 찾아 적용 선택자[속성 = 값]{...} p[class=hello] - 속성^=값 : 특정 값으로 시작하는 속성을 가진 요소 선택자[속성^=값]{...} p[class^=A] - 속성=값:특정값으로끝나는속성을가진요소선택자[속성=값]{...} - 속성*=값 : 특정값을 포함하는 속성을 가진 요소 선택자[속성*=값{...}
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Selector</title><style>ul{list-style: none;}
li{display: inline; margin: 10px;}
a{text-decoration: none; font-size: 30px; }
a[href] {background-color: yellow;}
a[target= "_blank"]{background-color: turquoise;} /* target = _blank 인 */a[class^="j"]{background-color: yellow;} /* j로 시작하는 */a[class$="a"]{background-color: yellow;} /* a로 끝나는 */a[class*="s"]{background-color: yellow;} /* s가 포함된 */</style></head><body><ul><li> Main menu :</li><li><ahref="http://naver.com"class="java">naver</a></li><li><ahref="http://google.com"class="jsp">google</a></li><li><ahref="http://daum.net"class="spring">daum</a></li></ul></body></html>
9) 가상클래스 선택자 : 사용자 동작에 반응하는 스타일 적용시 사용 a 태그에서 많이 볼 수 있다.
a:link : 기본. 방문전 링크 스타일에 적용 a:visited : 방문한 링크 스타일에 적용 a:hover : 요소가 마우스 커서를 올려놓을때 스타일 a:acitve : 요소가 활성화 했을때 스타일 적용 (a-> 누르고 있을때) a:foucs : 요소가 초점이 맞추어 져있을때 스타일 적용)
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Selector</title><style>a:link{color: black;}
a:visited{color: turquoise;}
a:hover{background-color: yellow;}
a:active{color: magenta;}
a:focus{background-color: lightblue;}
</style></head><body><ul><li> Main menu :</li><li><ahref="http://naver.com"class="java">naver</a></li><li><ahref="http://google.com"class="jsp">google</a></li><li><ahref="http://daum.net"class="spring">daum</a></li></ul></body></html>
10) UI 요소 상태에 따른 가상 클래스 선택자 : 웹 요소 상태에 따라 스타일 지정
: enable : 사용가능상태의 요소 (텍스트 필드) : disable : 사용불가상태 요소 : checked : 체크된 상태의 요소 (라디오, 체크박스)
11) 구조 가상 클래스 선택자 : 웹 문서 구조를 기준으로 특정 위치에 있는 요소 찾아 스타일 적용
: root : HTML : nth-child(n) : 앞에서부터 n번째 자식요소 : nth-last-child(n) : 뒤에서부터 n번째 자식요소 : nth-child(odd) : 홀수번째 자식요소 : nth-child(even) : 짝수번째 자식요소 : first-child : 첫번째 자식 : last-child : 마지막 자식 : not(선택자) : 괄호안에 있는 요소를 제외한 나머지
12) 가상 요소 선택자 가상 클래사 = 여러 태그중 원하는 태그를 선택하기 위한 선택자 가상 요소 = 태그안 내용의 일부분만 선택해 스타일 적용
::first-line : 첫번째 줄 ::first-letter : 첫번째 글자 ::befor : 내용 맨 앞 ::after : 내용 맨 뒤
1. CSS (Cascading Style Sheets) HTML과 함께 웹 표준의 기본 개념. HTML : 웹 사이트 내용 나열 CSS : 디자인 구성 독립적 사용불가. HTML에 도움을 주는 언어.
2. 스타일 형식 *선택자* {속성명 : 속성값; 속성명 : 속성값; ....} 선택자 : Selector라 하며, 스타일을 어디에 적용할 것인지 선택하는 방법 (중요) {} : 스타일 적용 코드 영역 : : 속성명과 값의 구분자 ; : CSS 속성 : 값 지정후 명령어의 종료를 나타내기위해 기입.
주석 : /* 내용... */
3. CSS 적용 방법 3가지 스타일 규칙들을 한데 묶어 놓은것을 '스타일 시트'라 함.
1) *외부 스타일 시트* : CSS 파일(.css)을 별도로 작업하여 연결 <link href="css 파일 경로" rel="stylesheet" /> type="text/css (//MIME TYPE)" />
href : css 파일 경로 지정 rel : 링크 걸린 파일과의 관계에 대한 기술 type : 파일의 형식 기술 : text로 기술된 css 타입의 파일이다 (MIME Type)
2) 내부 스타일 시트 : HTML 파일에 <style> 태그로 작업 3) 인라인 스타일 시트 : 태그에 속성으로 작업
/* stylr.css 파일 */
h1 {background-color: aqua;}
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Styletype</title><!-- 외부 스타일 시트 --><linkhref="style.css"rel="stylesheet"type="text/css" /><style>/* 내부 스타일 시트 : 이 태그 사이에 CSS 문법으로 스타일 코드 작성 */h2{background-color: lightblue;}
</style></head><body><h1> 외부스타일 시트 </h1><h2> 내부스타일 시트 </h2><h3style="background-color: magenta"> 인라인 스타일 시트 </h3></body></html>
