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) ~= : 속성값이 속성값에 포함되어있을때 (한단어..
CSS 01. 기본선택자
2022. 12. 9. 16:36
Front/CSS
CSS (Cascading Style Sheets) : HTML로 작성된 웹 문서를 꾸미기 위한 기법 1. 선택자(Selector) 란? 특정 html요소를 선택하고자 할때 사용하는 기능 , 해당 요소를 선택해서 원하는 "스타일"과 "기능"을 적용시킬 수 있음 1) 모든(전체) 선택자 : * 현재 문서상 모든 요소를 선택하고자 할때 사용 2) 태그 선택자 : 태그명 현재 문서상 해당 태그들을 다 선택하고자 할 때 사용 ( 다중선택가능) 3) 아이디 선택자: #아이디명 현재 문서상 특정 html요소 "하나"만을 선택하고자 할 때 사용 단, 해당 요소에 id속성을 이용해서 고유한 아이디값 부여해야함 아이디 선택자1 아이디 선택자2 아이디 선택자3 아이디 선택자4 HTML 삽입 미리보기할 수 없는 소스 4) ..
HTML 06. 하이퍼링크 관련태그
2022. 12. 9. 16:26
Front/HTML
하이퍼 링크 - 웹문서의 가장 핵심적인 기능으로 뭔가를 클릭해서 다른곳으로 편리하게 이동할 수 있도록 도와줌 - 텍스트를 클릭해서 링크를 이동하는 방법, 이미지를 클릭해서 넘어가는 방법 등 존재 - 현재 페이지 내에서 이동하는 방법도 있음 글자관련태그 목록관련태그 네이버 HTML 삽입 미리보기할 수 없는 소스 * target 속성 : 연결된 페이지를 어느탭에서 열 것인지 지정 (_self (현재탭) , _blank(새탭)) HTML 삽입 미리보기할 수 없는 소스 * img 이용해서 링크만들기 * 도형이용해서 링크만들기 HTML 삽입 미리보기할 수 없는 소스 * 한페이지내에서 위/아래/지정 한 곳으로 점프하는 링크 만들기 : 이동하고자하는 곳에 아이디를 부여한 후 href="#id"로 작성 위쪽으로 올라가..