![thumbnail](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FWDppo%2FbtrTsnIb7lm%2F4aSCvy5xehAeOsA5tYkGbK%2Fimg.png)
CSS 10. 레이아웃 관련 스타일(1)
2022. 12. 12. 17:21
Front/CSS
블럭요소 : 한줄로 영역 차지하고 있는 요소 / 줄바꿈 발생 ( div, p, pre, h1~h6) 인라인 요소 : content부분만 영역을 차지하고있는 요소 / 옆으로 배치 ( span, label. input, image, 글자관련태그..) * 요소의 크기 : content 영역 + padding 영역 +border 영역 margin영역 (요소의 바깥쪽 영역) 레이아웃 관련 스타일 - width, height : 기본적으로 내용을 차지하는 content 영역의 가로, 세로 길이를 조절하는 스타일속성 고정크기 (px) HTML 삽입 미리보기할 수 없는 소스 가변 크기 (%) - 화면의 크기에 따라 변경 HTML 삽입 미리보기할 수 없는 소스 - display : 화면 배치 방법 변경 선택자 { dis..
CSS 09. 배경 관련 스타일
2022. 12. 12. 17:07
Front/CSS
배경 관련 스타일( background-) background-color : 배경색 지정시 사용 나는 라이너 묻힌 있습니다. 다하지 계집애들의 차 이국 듯합니다. 새겨지는 비둘기, 불러 프랑시스 봅니다. 별빛이 가을 부끄러운 쓸쓸함과 지나고 어머님, 봅니다. 하나에 많은 이 봅니다. 까닭이요, 나는 내 않은 이름과 아이들의 까닭입니다. 자랑처럼 별 속의 말 있습니다. HTML 삽입 미리보기할 수 없는 소스 background-clip : 배경을 적용시키고자 하는 범위 지정할 때 사용 선택자{background-clip : border-box(기본값) | padding-box | content-box;} 이름과, 이 어머님, 딴은 우는 아스라히 흙으로 계십니다. 애기 아직 걱정도 내 가슴속에 청춘이 보고,..
CSS 08. 테두리 관련 스타일
2022. 12. 12. 16:58
Front/CSS
테두리 관련 스타일(border-) 선택자 { *테두리 스타일 border[-위치]-style : none | dotted | dashed | solid | double | groove | ridge | inset| outset; *테두리 두께 border[-위치]-width : 테두리두께; *테두리 색상 border[-위치]-color : 테두리색상; *테두리두께, 스타일, 색상을 한큐에 지정 border[-위치] : 두께 스타일 [색상]; *테두리 모서리 둥그스름하게 border[-상하위치-좌우위치]-radius :숫자; *박스의 그림자 효과 box-shadow : 가로거리(x) 세로거리(y) 흐림정도 번짐정도 색상 ; } 로그인 HTML 삽입 미리보기할 수 없는 소스
CSS 07_ 영역 관련 스타일
2022. 12. 12. 16:42
Front/CSS
여백 및 간격 관련 스타일 요소 영역 == content (내용물) + padding (여백) + border(테두리) * padding : content 영역과 border영역 사이의 거리(여백)을 조절하는 스타일 속성 기준 div 기준 div padding 컨텐츠영역 컨텐츠영역 컨텐츠영역 HTML 삽입 미리보기할 수 없는 소스 * margin : 타요소 간의 간격을 띄워주고자 할 때 사용 컨텐츠영역 컨텐츠영역 컨텐츠영역 HTML 삽입 미리보기할 수 없는 소스
CSS 06. 목록 관련 스타일
2022. 12. 12. 16:36
Front/CSS
목록 관련 스타일(list-) list-style-type : 불릿 기호 변경 list-style-image : 불릿기호로 이미지 적용 list-style-position : 불릿기호의 위치를 조정할때 사용 *순서 없는 목록 (ul) 선택자{ list-style-type : disc | circle | square | none; list-style-image : url("적용시키고자 하는 이미지의 경로"); list-style-position : inside | outside(기본값); } *순서 있는 목록(ol) 선택자{ list-style-type : decimal | decimal-leading-zero(숫자앞 0붙여줌); list-style-type : lower-alpha | upper-alph..
CSS 05. 텍스트 관련 스타일
2022. 12. 12. 16:26
Front/CSS
텍스트 관련 스타일 ( text- ) color : 텍스트의 색상지정 선택자 { color : 색상명 | 16진수 | rgb(x,x,x) | rgba(x,x,x,x) | hsl(x,x,x) | hsla(x,x,x,x) } (hue 색상, saturation 채도 , lightness 밝기) text-decoration : 텍스트에 줄을 긋거나 기존의 줄을 없얼때 사용 선택자{text-decoration : none | underline | overline | line-through;} 텍스트 영역 아래 줄 긋기 텍스트 영역 중간에 줄 긋기 텍스트 영역 위에 줄 긋기 네이버로 HTML 삽입 미리보기할 수 없는 소스 text - transform : 영문텍스트의 대소문자 변환시 사용 선택자{ text-tra..
CSS 04. 글꼴관련 스타일
2022. 12. 9. 20:17
Front/CSS
1. font-family : 글꼴을 지정할때 사용 선택자{font-famliy : 글꼴명, 글꼴명, ...} font 테스트1 HTML 삽입 미리보기할 수 없는 소스 * 외부 웹 폰트 사용하는 방법 웹폰트 제공 사이트 : http://www.fonts.google.com 글꼴 테스트 Font Style Test HTML 삽입 미리보기할 수 없는 소스 2. font-size : 글꼴의 크기를 변경할 때 사용 선택자{font-size : 크기(px| em| %)} px : 고정크기 / em,%: 가변 크기 ( 상위글꼴 대비) 고정크기 px테스트 가변크기 em테스트 가변크기 %테스트
CSS 03. 선택자 우선순위
2022. 12. 9. 17:40
Front/CSS
선택자 우선순위 기본적으로 CSS는 위에서 부터 아래로 적용 ( 마지막에 작성된 스타일이 반영) 단, 동일한 요소를 다양한 선택자로 스타일을 부여했을 경우 작성순서에 관계없이 우선순위에 따라 적용 태그 선택자-> 클래스 선택자-> 아이디 선택자 -> 인라인스타일방식 -> !important 우선순위 테스트 HTML 삽입 미리보기할 수 없는 소스
CSS 02. 기타 선택자 (2)
2022. 12. 9. 17:33
Front/CSS
3. 동위( 같은레벨) 선택자 동위같계에 있는 뒤에 위치한 특정요소를 선택할 때 사용 - a 요소 바로 뒤에 있는 b요소 "하나" 만을 선택 a+b{스타일 속성 : 값}; -a 요소 뒤에있는 "모든" b요소 선택 a~b{ 스타일 속성 : 값}; div1 div2 div3 div4 ul 안녕 HTML 삽입 미리보기할 수 없는 소스 4. 반응 선택자 사용자의 움직임에 따라 선택되는 선택자 - 해당요소에 클릭이 되는 순간 스타일 부여 선택자 : active { 스타일속성 : 값; } - 해당 요소에 마우스가 올라가는 순간 스타일 부여 선택자: hover { 스타일속성 : 값; } active테스트 hover테스트 클릭 HTML 삽입 미리보기할 수 없는 소스 5. 상태 선택자 요소의 상태에 따라서 선택되는 선택..
CSS 02. 기타 선택자 (1)
2022. 12. 9. 17:11
Front/CSS
1. 속성 선택자 : 선택하고자 하는 요소 내에 작성되어있는 속성을 이용해서 선택하는 방법 선택자 뒤에 [] 를 이용해서 속성과 속성값을 제시하면서 선택 선택자[속성=속성값]{ : 속성과 속성값 일치 선택자[속성~=속성값]{ : 속성값을 포함(한단어) 선택자[속성|=속성값]{ : 속성값의 시작(- 기준 한 단어) 선택자[속성^=속성값]{ : 속성값의 시작(단어 X) 선택자[속성$=속성값]{ : 속성값 끝 선택자[속성*=속성값]{ : 속성값을 포함 스타일 속성 : 값; } HTML 삽입 미리보기할 수 없는 소스 1) = : 속성과 속성값이 일치 할때 div 요소들 중 name속성값이 name1과 '일치'하는 요소 HTML 삽입 미리보기할 수 없는 소스 2) ~= : 속성값이 속성값에 포함되어있을때 (한단어..