본문 바로가기

CSS

 (8)
8. 슬라이더(slider) 만들어보기 head head 부분에 외부 CSS파일을 링크해준다. body input 태그 4개와 label 태그 4개를 id와 for을 이용해 연결해준다. input 태그의 첫 번째를 checked 해주면서 실행 시 첫 번째가 나타나도록 한다. ul > li는 body상에서 구분을 위해 글씨를 작성해주었지만 CSS를 통해 가린다. 첫 번째 화면(이미지) 두 번째 화면(이미지) 세 번째 화면(이미지) 네 번째 화면(이미지) CSS 편의상 한 줄로 표현한 코드 존재 유의하기! 슬라이더가 들어갈 공간(div)는 상위 공간으로서 position을 relative로 설정해주고 다음과 같이 추가적으로 작성해준다. 슬라이더 변화가 총 4개이므로 width를 400%로 설정해준다. 만약 세로로 움직이는 슬라이더를 만들고 싶다면..
7. transform과 transition transform transform은 요소의 모양을 변화시키는 속성으로, 속성값은 다음 함수를 사용한다. 1. 위치 변환 - translate translate(x, y) - 현재 위치에서 x, y 만큼 이동 translateX(x) - x축으로만 이동 translateY(y) - y축으로만 이동 2. 각도 변환 - rotate(각도) 단위 deg 기본 회전 방향은 시계 방향 minus 수치는 반시계 방향 3. 크기 변환 - scale 단위 없음 -> 배수로 변환 scale(x, y) - 너비, 높이 둘다 변환 scaleX(x) - x축으로만 변환 scaleY(y) - y축으로만 변환 4. 기울기 변환 - skew(각도) 단위 deg skew(deg, deg) - x축, y축 모두 기울기 변환 skewX..
6. display의 flex display: flex 요소 display: flex는 컨테이너 요소(부모 요소)에 설정한다. 주요 속성 1. flex-direction flex-direction은 내부 요소(자손 요소)의 배치 방향을 조정한다. 속성값) row : 기본값. 왼쪽에서부터 가로로 배치 row-reverse : 오른쪽에서부터 가로로 배치 column : 위에서부터 세로로 배치 column-reverse : 아래에서부터 세트로 배치 2. flex-wrap flex-wrap은 내부 요소의 줄바꿈을 설정한다. 속성값) nowrap : 기본값. 줄바꿈 없음. (내부 요소가 부모 요소 밖으로 나감) wrap : 자동 줄바꿈. (넘치는 요소가 밑으로 이동) wrap-reverse : 자동 줄바꿈. (넘치는 요소가 위로 이동) 3. ..
5. 다양한 요소(element) z-index z-index는 중첩된 요소의 쌓이는 순서를 지정한다. 작은 번호가 바닥으로, 큰 번호가 위로 올라간다. opacity opacity는 투명도를 지정하는 속성이다. 범위는 0.0(완전 투명) ~ 1.0(완전 불투명, 기본값)을 가진다. overflow overflow는 영역 요소에 비해 내부 콘텐츠 요소의 너비와 높이 길이가 큰 경우 사용한다. 속성값) visible : 기본값. 그대로 둠. (아무 조치 안 함) hidden : 넘친 콘텐츠를 숨김. (제거) scroll : 넘친 콘텐츠를 숨기고, 스크롤바를 붙임. (항상 붙임) auto : 안 넘치면 그대로, 넘치면 스크롤바를 붙임. => 콘텐츠가 text인 경우에는 auto, image일 경우에는 hidden을 주로 사용한다. float..
4. 요소의 처리와 선택자 요소의 그림자 처리(box-shadow) box-shadow는 주로 블록 요소에 설정한다. 문형 = box-shadow: 수평수치 - 수직수치 - 흐림수치 - 번짐수치 - 색상 - 삽입효과 흐림(blur) : 그림자의 테두리가 흐려지게 하는 효과. 번짐(spread) : 그림자의 크기 설정. 요소의 위치 처리(position) position은 콘텐츠(텍스트, 이미지, 테이블 등) 요소를 문서에 배치할 때 사용하는 속성이다. static : 일반적인 위치(기본값) relative : static 위치에서의 상대적인 위치로 설정. left, right, top, bottom 속성으로 위치를 지정. fixed : 특정 위치에 고정. 창(브라우저)에 고정. absolute : 특정 위치에 고정. 문서(페이지)..
3. 배경 및 텍스트 배경(Backgorund) 요소의 배경 효과를 주기 위한 스타일 설정 속성은 background이다. 1. background-color : 배경 색상을 지정하는 속성. 2. background-image : 배경에 이미지를 지정하는 속성. 3. background-repeat : 배경 이미지의 반복 여부 지정 속성. repeat - x, y 반복(기본값) no-repeat - 반복 없음 repeat-x - 가로 방향으로만 반복 repeat-y - 세로 방향으로만 반복 4. background-size : 배경 이미지의 크기 지정 속성. 수치(px, % 등) contain : 이미지가 요소 영역 내부에 모두 출력. 공백이 발생할 수 있음. cover : 이미지가 요소 영역을 덮음. 너비 공백은 발생하지 ..
2. 색상/테두리/요소의 크기/여백 색상 처리 색상을 처리하는 방식에는 다음과 같이 세 가지가 있다. 1. RGB rgb(red, green, blue) 함수 사용. 각 생상별 0~255 사이의 수치를 조합. rgba(red, green, blue, alpha) 함수 - 투명도 반영. alpha : 투명도(0.0~1.0). 0에 가까울수록 투명해짐. 2. HEX16진수로 색상을 지정. 16진수로 색상을 지정 #abc -> #aabbcc의 단축 표현 투명도 처리 : 8자리 수치로 표현. 00 : 0.0, ff : 1.0 3. HSL hsl(hue, saturation, lightness) 함수 사용. h - 색조, s - 채도, l - 명도 H : 0 ~ 360까지의 색상환 각도로 표현 S : 0 ~ 100%의 백분률 값. 0-회색음영, 1..
1. CSS 기초 CSS란? CSS3(Cascading Style Sheets ver.3)은 HTML 문서에 스타일(모양)을 지정하는데 사용하는 언어이다. 문법(구문)은 다음과 같다. Selector { Property: Value; Property: Value; ... } Selector(선택자, 선택기) : HTML 요소를 선택하는 지시자. Property : 요소에 적용할 스타일 속성. (글자 색 번경 - color) Value : 적용할 스타일 속성의 값. (색상 - red) ex) 태그의 글자를 빨간색으로 표현해라. -> p { color: red; } CSS 작성 위치 1. 인라인 스타일(In-line Style) : 태그의 style 속성에 작성. 해당 요소에만 스타일이 적용됨. 2. 내부 스타일(Intern..

티스토리툴바