(기본형 예시) - 선택자 : first-of-type : 부모박스 안에 형제관계 중 첫번째로 위치하는 태그를 선택합니다. - 선택자 : last-of-type : 부모박스 안에 형제관계 중 마지막에 위치하는 태그를 선택합니다. - 선택자 : nth-of-type : 부모박스 안에 형제관계 중 첫번째로 위치하는 태그를 선택합니다. - 선택자 : nth-last-of-type : 부모박스 안에 형제관계 중 뒤에서 숫자또는 수열번째로 위치하는 태그를 선택합니다.
css 적용 예시
<style>
h1:first-of-type { 부모박스 안에 있는 형제관계 중 첫번로 위치한 아이
color: thistle;
}
h2:last-of-type { 부모박스 안에 있는 형제관계 중 마지막에 위치한 아이
color: tomato;
}
h3:first-of-type { 부모박스 안에 있는 형제관계 중 첫번째로 위치한 아이
color: aqua;
}
p:nth-of-type(2) { 부모박스 안에 형제관계 중 첫번째로 위치한 아이
color: blue;
}
(기본형 예시) - : checked : 체크박스에 체크가 된 상태의 input태그를 선택합니다. - : focus : 초점이 맞춰진 input태그를 선택합니다. - : enabled : 입력 또는 사용이 가능한 상태의 input태그를 선택합니다. - : disabled : 입력 또는 사용이 불가능한 상태의input태그를 선택합니다.
html 작성 예시
<!--입력이 가능한 상태 -->
<h2>enabled</h2>
<p><input type="text" /></p>
<!--입력이 불가능한 상태 -->
<h2>disabled</h2>
<p><input type="text" disabled /></p>
<!--체크박스-->
<h2>disabled</h2>
<p><input type="checkbox" />체크</p>
(기본형 예시) - : : first-letter : 태그 내부의 첫 글자를 선택합니다. - : : first-line : 태그 내부의 첫 줄을 선택함.
시작 문자 선택자 적용하기(많이 사용되진 않는 태그)
4. 가상 요소 선택자란?
선택한 태그에 앞이나 뒤에 가상 요소를 만드는 선택자 입니다. html코드에는 존재하지 않지만 html구조에 가상 요소를 만들어서 스타일을 부여하는 역할입니다. 마치 html코드가 있는 것처럼 스타일링 할때 사용합니다. 가상 요소 선택자로 만들어진 요소는 기본적으로 inline속성을 가집니다. 가상 요소를 만들때는 content속성을 이용합니다.
(기본형 예시) - :: before : 특정 요소의 앞에 가상 요소를 만들고 내용은 content속성을 넣습니다. - :: after : 특정 요소의 뒤에 가상 요소를 만들고 내용은 content속성을 넣습니다.
<p>
Lorem ipsum dolor sit, <span>amet consectetur</span> adipisicing elit. Totam molestiae placeat aliquam, veritatis
deserunt nobis eveniet ei us animi debitis <span>veniam minus</span> eaque mollitia sequi officiis quas ut libero
aperiam natus?
</p>
<p>
Lorem ipsum dolor sit, amet<span>consectetur adipisicing</span> elit. Totam molestiae placeat aliquam,
<span>deserunt nobis eveniet</span>veritatis ei us animi debitis veniam minus eaque mollitia sequi officiis quas
ut libero aperiam natus?
</p>
2. background-image : 배경에 이미지를 넣을 수 있습니다. url()속성값을 사용하며 ()사이에 이미지 경로가 들어갑니다.
3. background-repeat : 배경 반복 여부를 지정합니다. 배경속성은 바둑판 배열로 반복되는 것이 기본값입니다.
4. background-attachment : 배경을 스크롤에 따라 고정할지 같이 스크롤할지 결정합니다.
5. background-position : 배경의 위치를 지정합니다. center : 배경을 가로나 세로가운데로 정렬합니다.
6. background-size : 배경의 크기를 지정합니다.
속성들의 속성값 종류
1. background-repeat - no-repeat : 반복하지 않습니다. 불러온 배경 이미지를 1번만 보여줍니다. - repeat-x : 배경이미지를 가로로 반복합니다. - repeat-y : 배경이미지를 세로로 반복합니다.
2. background-attachment - fixed : 스크롤에 따라 움직이지 않고 제자리에 고정합니다. - scroll : 기본값으로 스크롤이 움직이면 배경이 위로 올라갑니다.
3. background-position - px - left :영역의 왼쪽으로 정렬합니다. - center : 배경을 가로나 세로가운데로 정렬합니다. -right : 영역의 오른쪽으로 정렬합니다. - top : 영역의 위로 정렬합니다. - bottom : 영역의 아래로 정렬합니다.
4. background-size - px / % - cover : 배경 이미지를 가로 영역에 맞춰 채웁니다. - contain : 배경 이미지를 세로 영역에 맞춰 채웁니다.
.back1 {
margin: 40px;
width: 500px;
height: 300px;
/* 배경 이미지 불러오기 : 먼저 불러온 이미지가 앞으로 옵니다 */
background-image: url(./img/icon.png), url(./img/ggg.jpg);
background-color: antiquewhite;
background-size: 10%;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;
background-position: 100px 50px;
background-position: center center;
background-size: cover;
}
.back2 {
margin: 40px;
width: 50vw;
height: 300px;
background: url(./img/ggg.jpg) no-repeat;
background-color: rgb(216, 215, 216);
/* 영역의 가로 사이즈에 맞춰서 이미지를 정비율로 100% 채움 */
background-size: 100%;
background-size: cover;
background-position: center bottom;
/* background: url(주소) 반복여부 가로위치 세로위치 컬러/사이즈; */
}
/* 대부분 이미지의 비율을 맞출 때 cover를 많이 사용합니다. */
.back3 {
width: 2000px;
height: 200px;
background-color: turquoise;
background-image: url(./img/ggg.jpg);
background-size: 100%;
background-position: center center;
background-attachment: fixed;
color: #fff;
text-align: center;
box-sizing: border-box;
padding: 120px 40px;
}
.back3 > h2 {
font-size: 30px;
margin-bottom: 20px;
}
.back3 p {
font-size: 18px;
배경속성 적용해보기
속성값이 너무 많기 때문에 많은 연습이 필요할 것 같습니다.
6. 다양한 색상 표현
투명도를 조절하는 opacity와 alpha
컨텐츠에 투명도를 적용하고 싶을 때 opacity와 alpha를 이용할 수 있습니다. 투명도는 0~1까지의 값을 입력할 수 있고, 소숫점단위로 투명도를 조절할 수 있습니다. 0이 완전 투명한 상태를 뜻하며 1이 완전히 선명한 상태를 의미합니다. opacity의 경우 영역안에 포함 된 border, 컨텐츠까지 모두 투명하게 만들고 alpha의 경우 컨텐츠와 border를 제외한 배경영역만 투명하게 만듭니다.
배경 색상이나 글자에 그라데이션을 적용하실 수 있습니다. 배경에 적용할 경우 background-image속성을 이용하며 글자를 적용할 경우 color에 적용합니다.
1. linear-gradient : (각도 to 방향, 색상중단점1 시작위치%, 색상중단점2 시작위치%...) (방향 종류) - to top : 아래에서부터 위로 그라데이션을 적용합니다. - to left : 오른쪽에서 시작해 왼쪽으로 적용합니다. - to right : 왼쪽에서 시작해 오른쪽으로 적용합니다. - to bottom : 위에서부터 아래로 그라데이션을 적용합니다.
2. radial-gradient : (최종모양 크기 at 위치, 색상중단점1 시작위치%, 색상중단점2 시작위치%... )
(최종 모양) - ellipse : 타원 - circle : 정원
(크기) - closet side : 정원의 경우 그라디언트 가장 자리가 그라디언트 중심에서 가장 가까운 요소에 모서리랑 만나고 타원의 경우 그라디언트 중심에서 가장 가까운 요소의 수평축이나 수직축이랑 만남니다.
