Front-end/CSS
-
CSS 가상선택자(Pseudo-class)Front-end/CSS 2019. 12. 26. 21:39
191226 수업 내용 정리 가상선택자(Pseudo-class) 가상선택자 설명 a:link 아직 방문하지 않은 링크문자열 선택 (클릭 전) a:visited 방문한 적이 있는 링크문자열 선택 (클릭 후) a:hover 마우스 포인터를 올려 둔 링크문자열 선택 a:active 클릭한 순간의 링크문자열 선택 주의사항 a:hover는 a:link, a:visited 뒤에 와야함, a:active는 a:hover뒤에 와야함 즉, 표에 있는 순서대로 위에서부터 사용해야함 예제 CSS a:link {color:cyan;text-decoration:none;} a:visited {color:powderblue;text-decoration:none;} a:hover {color:red;text-decoration:n..
-
CSS3 속성 몇 가지, AnimationFront-end/CSS 2019. 12. 21. 01:43
191220 수업 내용 정리 CSS3 속성 몇 가지 border-radius : 테두리의 둥글기를 지정, 숫자가 커질수록 원에 가까워짐 box-shadow : 오른쪽 그림자 크기, 아래쪽 그림자 크기, 번지는 정도, 색상 ex) box-shadow:10px 10px 30px #666666; 오른쪽 10px, 아래쪽 10px 크기, 30px 넓이로 퍼짐, #666666 색을 가짐 background-size : width height; text-shadow : 텍스트 그림자 지정, 들어가는 값은 box-shadow와 동일 색상을 rgba(r, g, b, a)로 지정하면 4번째 값에 opacity(투명도 : 0 ~ 1)를 부여할 수 있음 animation animation-duration : 작동시간(초) ..
-
CSS Position, Float, Pre, Vendor PrefixFront-end/CSS 2019. 12. 19. 23:48
191219 수업 내용 정리 position 속성 - 위치 설정 속성(width, height와 같이 사용) 1. static : 작성한 순서대로 화면에 배치, default 2. absolute : 절대 좌표 지정, 포함되어 있는 요소의 기준점 기준 ( default = 브라우저 좌측 상단 ) ex) div {position: absolute; top: 0px; left: 0px;} (크기 지정 필수, 편의상 생략, 아래의 예들도 동일) → 해당 div태그가 브라우저 좌측 상단에 위치 3. relative : 상대적인 좌표 지정, 기준 default = 요소가 만들어지는 흐름 안에서 이전 요소의 끝부분이 원래 있어야 할 위치 ex) div {position: relative; top: 10px; lef..
-
CSS 배경(Background), 문단 속성, 단위Front-end/CSS 2019. 12. 19. 23:19
191219 수업 내용 정리 배경 속성 background : 배경 상위 속성 ▷하위 속성 - 1. background-color : 색상 2. background-image : url(이미지파일 경로) 3. 이미지 반복 속성 : repeat-x (가로로 반복 출력) repeat-y (세로로 반복 출력) no-repeat (반복 안 함) 4. fixed : 이미지 고정 5. background-position : x-position y-position; 이미지 위치 지정 ▷ 가로 위치 값 : left, center, right, 백분율, 길이 세로 위치 값 : top, center, bottom, 백분율, 길이 ex) background: color url() repeat fixed position; →..
-
CSS Box Model - 여백, 테두리Front-end/CSS 2019. 12. 19. 23:06
191219 수업 내용 정리 여백 속성 margin : 해당 태그의 바깥쪽 여백 / padding : 안쪽 여백 ▷ top, right, bottom, left 시계방향으로 여백 지정 ex) margin: 10px 15px 10px 15px; → 상하 10px, 좌우 15px의 바깥쪽 여백을 가짐 ▷ margin-top 처럼 개별적으로 지정할 수도 있음 ▷ margin: npx; 과 같이 하나의 값만 주면 전방위로 npx만큼의 여백을 적용 ▷ margin: npx auto; = margin-top/bottom:0px; margin-left/right:auto → 상하는 0px, 좌우는 해당 태그가 중앙에 오도록 자동으로 설정됨 ※ padding도 margin과 동일한 방식으로 작용 - 두 여백의 차이점을..
-
CSS 선택자(Selector), DIV, SPAN 태그Front-end/CSS 2019. 12. 19. 22:53
191219 수업 내용 정리 CSS 선택자 1. 전체 선택자(Universal Selector) * : 모든 태그(요소)에 영향을 미침, 형식) *{속성:값;~} 2. 태그 선택자(Type Selector) : 와 같은 모든 태그의 스타일을 조정, 형식) tag {속성:값;~} 3. 클래스 선택자(Class Selector) .class : .class 와 같은 값을 가진 모든 클래스에 영향을 줌, 형식) (tag).class {속성:값;~} 4. id 선택자(ID Selector) #id : 해당 id 값을 가진 태그에 스타일 적용, id는 전체 문서에서 하나의 값만을 가질 수 있음 형식) 태그명#선택자{속성:값;~} // id는 유일하기 때문에 태그명을 생략해도 스타일 적용 가능 div, span 태..
-
CSS(Cascading Style Sheets) 개요Front-end/CSS 2019. 12. 18. 23:54
191218 수업 내용 정리 CSS란? - Cascading Style Sheets의 약자로, HTML의 제약을 뛰어넘어, 문서를 보다 효율적이고 아름답게 꾸밀 수 있도록 도와주는 언어 CSS사용 방식 1. 인라인 방식(in-line style) : 해당 태그에 직접 쓰는 방식, style="속성명:값;속성명2:값2~" 동일한 태그에 스타일이 적용될 경우 -> 우선순위가 높음 (일반적으로는 동일한 태그에 서로 다른 스타일이 적용되면 마지막 것이 적용됨) 2. 임베디드 방식(embedded style) : 웹문서에서 공통으로 사용하는 색깔, 이미지, 글꼴 등을 영역에 선언해서 사용하는 방식 형식) 스타일 적용시킬 태그(또는 선택자, 동시에 여러 개 적용 가능) {속성명:값;~} 3. 링크 방식(link s..