[32일차] CSS

오리는짹짹 2023. 2. 7. 17:36

목차
1. CSS 선택자 다루기
2. CSS 필수 속성 다루기

1. CSS 선택자 다루기

1. 조합 선택자 사용하기

그룹 선택자
- 여러 선택자를 하나로 그룹 지을 때 사용
- 선택자와 선택자는 , 로 구분

 p, #title, red{
    color:red;
 }

자식 선택자
- 부모 요소의 하위에 있는 자식 요소에 스타일을 적용할 때 사용
- 2개 이상의 선택자 사용
- 선택자와 선택자는 > 기호로 구분
하위 선택자
- 선택자의 범위를 특정 부모 요소의 하위 요소로 한정하는 방법
- 2개 이상의 선택자 사용
- 선택자와 선택자는 공백으로 구분

<style>
    div p{
        color:red;
    }
</style>
<div>
    <p>lorem 1</p>
    <ul>
        <li>
            <p>lorem 2</p>
        </li>
        <li>
            <p>lorem 3</p>
        </li>
    </ul>
</div>
<p>lorem 4</p>

인접 형제 선택자
- 앞에서 지정한 선택자 요소 바로 다음에 있는 형제 관계 요소를 선택자로 지정
- 2개 이상의 선택자 사용
- 선택자와 선택자는 + 기호로 구분

<style>
    h1 + h2{
        color:red;
    }
</style>

<h1>lorem1</h1>
<h2>lorem2</h2>
<h3>lorem3</h3>

일반 형제 선택자
- 이전 선택자 뒤에 오는 형제 관계 요소를 모두 선택자로 지정
- 2개 이상의 선택자 사용
- 선택자와 선택자는 ~ 기호로 구분

<style>
	h1 ~ h2{
	color:red;
        }
</style>

<h1>lorem1</h1>
<h2>lorem2</h2>
<h2>lorem3</h2>

2. 가상 요소 선택자 사용하기

가상 요소 선택자
- 존재하는 것처럼 취급해 선택하는 선택자 지정 방법
- :: 기호 를 붙여서 사용
- 기준 선택자와 함께 사용
- 기준 선택자 생략 시, 전체 선택자가 들어간 것으로 적용
::before
- 콘텐츠 앞의 공간 선택
::after
- 콘텐츠 뒤의 공간 선택

<style>
    p::before{
        content:'<before>';
    }
    p::after{
        content:'<after>';
    }
</style>

<p>Lerem, ipsum dolor.</p>

3. 가상 클래스 선택자 사용하기

가상 클래스 선택자
: 요소의 상태를 이용해 선택자를 지정하는 방법
링크 가상 클래스 선택자
: a 태그에서 발생할 수 있는 링크 상태를 이용해 선택하는 방법
- :link
  : 한 번도 방문하지 않은 링크일 때 선택
- : visited
  : 한 번이라도 방문한 적이 있는 링크일 때 선택

<style>
	a:link{/* 한 번도 방문한 적이 없는 링크 */
		color:orange;
	}
	a:visited{ /* 한 번이라도 방문한 적이 있는 링크*/
		color:green;
	}
</style>

<a href="https://www.daum.net">다음</a>
<a href="https://www.google.com">구글</a>

동적 가상 클래스 선택자
: 사용자의 어떤 행동에 따라 동적으로 변하는 상태를 이용해 선택자를 지정하는 방법
- :hover
  : 요소에 마우스를 올리면 해당 태그가 선택자로 지정
- :active
  : 요소를 마우스를 클릭하고 있는 동안에 해당 태그가 선택자로 지정

<style>
    p:hover{
        color:red;
    }
    button:active{
        color:red;
    }
</style>

<p>여기를 지나쳐보세요</p>
<button>active</button>

입력 요소 가상 클래스 선택자
: 입력 요소의 특정 상태를 이용해 선택자로 지정하는 방법
- :focus
  : 입력 요소에 커서가 활성화되면 선택자로 지정
- :ckecked
  : 체크박스가 표시되어 있으면 스타일 적용
- :disaled
  : 상호작용 요소가 비활성화되어 있으면 스타일 적용
- :enabled
  : 상호작용 요소가 활성화되어 있으면 스타일 적용

<!--focus 사용-->

<style>
    input:focus{
        color:royalblue;
    }
</style>

<input type="number" id="userid">

<!--checked 사용-->

<style>
    input:checked + label{
        color:aquamarine;
    }
</style>

<input type="checkbox" id="userid">
<label for="userid">아이디</label>

<!--disabled 사용-->

<style>
    input:disabled,
    button:disabled{
        background-color: #CCC;
    }
</style>

<input tyle="text" disabled>
<button disabled>버튼</button>

<!--enabled 사용-->

<style>
    input:enabled,
    button:enabled{
        background-color: #CCC;
    }
</style>

<input tyle="text">
<button disabled>버튼</button>

구조적 가상 클래스 선택자
: HTML 태그의 사용 위치, 다른 태그와의 관계에 따라 요소를 선택하는 방법
- :first-child와 :last-child
  부모의 요소의 첫 번째 혹은 마지막 자식 요소 선택
- :nth-child(n)과 :nth-last-child(n)
  - :nth-child(n)
    : E요소가 부모의 모든 자식 요소 중 n 번째 자식 요소가 맞으면 선택
  - :nth-last-child(n)
    : 선택자를 찾는 기준이 부모 요소의 끝에서부터
- :nth-of-type(n)과 :nth-last-of-type(n)
  - :nth-of-type(n)
    : 부모 요소의 자식 요소 중 n번째로 등장하는 E 요소 선택
  - :nth-last-of-type(n)
    : 선택자를 찾는 기준이 끝에서부터

<!-- :first-child와 :last-child 사용 -->

<style>
    li:first-child{
        color:red;
    }
    li:last-child{
        color:red;
    }
</style>

<ul>
    <li>lorem 1</li>
    <li>lorem 2</li>
    <li>lorem 3</li>
    <li>lorem 4</li>
</ul>

<!-- :nth-child(n) 사용 -->
    <style>
        p:nth-child(1){
            color:red;
        }
    </style>
</head>
<body>
    <p>lorem 0</p>
    <div>
        <p>lorem 1</p>
        <p>lorem 2</p>
    </div>
    <div>
        <p>lorem 3</p>
        <p>lorem 4</p>
    </div>
</body>

<!-- :nth-last-child(n) 사용 -->

    <style>
        p:nth-last-child(2){
            color:rgb(103, 216, 154);
        }
    </style>
</head>
<body>
    <p>lorem 0</p>
    <div>
        <p>lorem 1</p>
        <p>lorem 2</p>
    </div>
    <div>
        <p>lorem 3</p>
        <p>lorem 4</p>
        <p>lorem 5</p>
        <p>lorem 6</p>
    </div>    
</body>

<!-- nth-of-type(n) 사용 -->

	<style>
        p:nth-of-type(2){
            color:red;
        }
    </style>
</head>
<body>
    <p>lorem 0</p>
    <div>
        <p>lorem 1</p>
        <span>span 1</span>
        <p>lorem 2</p>
    </div>
    <div>
        <p>lorem 3</p>
        <span>span 2</span>
        <span>span 3</span>
        <p>lorem 4</p>
    </div>
</body>

<!-- p:nth-last-of-type(n) 사용 -->

	<style>
        p:nth-last-of-type(1){
            color:Red;
        }
    </style>
</head>
<body>
    <p>lorem 0</p>
    <div>
        <p>lorem 1</p>
        <span>span 1</span>
        <p>lorem 2</p>
    </div>
    <div>
        <p>lorem 3</p>
        <span>span 2</span>
        <span>span 3</span>
        <p>lorem 4</p>
    </div>   
</body>

2. CSS 필수 속성 다루기

1. CSS 특징 살펴보기

기본 스타일 시트에 정의된 스타일 속성보다 사용자가 정의한 스타일 속성이 우선 적용

	<style>
        h1{
            font-size:16px;
            font-weight:normal;
        }
    </style>
</head>
<body>
    <h1>h1 tag</h1>
    <h2>h2 tag</h2>
</body>

마지막에 작성된 값이 적용

    <style>
        p{color:red;}
        p{color:blue;}
        p{color:orange;}
    </style>
</head>
<body>
    <p>specificity</p>
    <p>specificity2</p>
</body>

!import 문법
점수가 낮더라도, 다른 선태자들을 모두 압도하고 이 스타일 우선 적용
상속

    <style>
        div{
            color:red;
        }
    </style>
    </head>
</head>
<body>
    <div>
        <p>inherit</p>
    </div>
</body>

상대 단위
- %
  해당 속성의 상위 요소 속성값에 상대적인 크기 가짐
- em
  부모 요소의 텍스트 크기에 상대적인 크기 가짐
- rem
  html 태그의 텍스트 크기에 상대적인 크기 가짐
- vw
  뷰포트의 너비를 기준으로 상대적인 크기 가짐
- vh
  뷰포트의 높이를 기준으로 상대적인 크기 가짐
색상 표기법
- 키워드 표기법
- RGB 색상 표기법
- HEX 표기법 : # 앞에 붙임

2. 텍스트 속성으로 텍스트 꾸미기

font-family 속성
- 속성값으로 글꼴명 작성

    <style>
        p{
            font-family:BatangChe, "Times new Roman", serif;
        }
            
    </style>
</head>
<body>
    <p>font-family</p>
</body>

font-size 속성
- 텍스트 크기를 변경하고 싶을 때 사용하는 속성

    <style>
        p{
            font-size:14px;
        }
    </style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet.</p>
</body>

font-weight
:텍스트의 굵기를 지정
- 숫자 표기법
  : 숫자 100단위로 텍스트 굵기 표현
  100~900 까지의 값 사용
- 키워드 표기법
  : lighter, normal, bold, bolder
font-style 속성
: 글꼴의 스타일 지정
- normal : 기본 형태 표시
- italic : 이탤릭체료 표시
- oblique: 기울임꼴로 표시

font-variant 속성
: 영문 텍스트를 크기가 작은 대문자로 변경할 때 사용
- normal: 텍스트 변환 x
- small-caps: 텍스트를 크기가 작은 대문자로 변환

    <style>
        .variant{
            font-variant: small-caps;
        }
    </style>
</head>
<body>
    <p>Lorem ipsum dolor sit.</p>
    <p class="variant">lorem ipsum dolor sit.</p>
</body>

text-align 속성
: 텍스트 정렬 시 사용
- left: 텍스트 왼쪽 정렬
- center: 텍스트 중앙 정렬
- right: 텍스트 오른쪽 정렬
- justify: 텍스트 양쪽 정렬

    <style>
        p{
            text-align:right;
        }
    </style>
</head>
<body>
    <p>울퉁불퉁 멋진 몸매에 빨간옷을입고<br>
        새콤달콤 향기풍기는 멋쟁이 토마토 토마토<br>
        나 는 야 쥬스될거야<br>
        꿀꺽<br>
        나 는 야 케첩될거야 찍<br>
        나 는야 춤을출꺼야 헤이 뽐내는 토마토 토마토</p>
</body>

text-decoration 속성
: 텍스트에 선을 그음
- none: 텍스트 장식을 모두 지음
- line-through: 텍스트 중간을 관통하는 선
- overline: 텍스트 위에 선 그음
- underline: 텍스트 아래에 선 그음

    <style>
        a{
            text-decoration:none;
        }
    </style>
</head>
<body>
   <a href="#">링크</a> 
</body>

letter-spacing 속성
: 자간 조절

    <style>
        p{
            letter-spacing:15px;
        }
    </style>
</head>
<body>
    <p>안녕하세요 지금은 12시 25분. 저는 지금 아주 많이 배가 고파요. 
        오늘 점심엔 쭈꾸미를 먹을거랍니다.</p>
</body>

line-height 속성
: 텍스트 한 줄의 높이 지정
- normal: 웹 브라우저에서 정한 기본값 적용
- 숫자: 현재 font-size 값에 입력한 숫자를 곱한 값 적용
- 퍼센트: 현재 font-size 값에 입력한 비율을 곱한 값을 적용
- 크기: 입력한 크기 적용

    <style>
        p{
            line-height:15px;
        }
    </style>
</head>
<body>
    <p>지금은 12시 29분. <br>
        이번엔 한 줄의 높이를 볼거랍니다🧐<br>
        모두 집중... 집중해주세요
    </p>
</body>

🐰 line-height를 30으로 하면

3. 박스 모델을 구성하는 속성 다루기

margin
- 박스 모델에서 가장 외부에 있는 영역
- 요소의 외부 여백 담당

    <style>
        .first{
            margin-bottom:20px;
        }
        .second{
            margin-top: 30px;
        }
    </style>
</head>
<body>
    <p class="first">lorem1</p>
    <p class="second">lorem2</p>
</body>

border 영역
- 요소의 테두리(경계선)를 담당

    <style>
        h1{
            border:1px solid #f00;
        }
        h2{
            border-bottom: 2px dotted black;
        }
    </style>
</head>
<body>
    <h1>h1</h1>
    <h2>h2</h2>

paddinig 영역
- 요소의 내부 여백 담당

    <style>
        p{
            border:1px solid rgb(22, 212, 54);
            padding:30px;
        }
    </style>
</head>
<body>
    <p>캐치티니핑</p>

content 영역
- width와 height 속성
- box-sizing 속성
- 박스 모델의 성격과 display 속성
  - 블록 성격
    - hn, p, div 태그를 사용했을 때 요소의 너비가 콘텐츠 유무와 상관없이 항상 가로 한 줄을 다차지
    - 여러 번 사용시 무조건 줄바꿈
  - 인라인 성격
    - a, span, strong 태그를 사용했을 때 요소의 너비를 요소의 너비를 콘텐츠 크기만큼만 차지
    - 웹 브라우저의 수평 공간이 남아 있으면 한 줄로 배치
  - 인라인 블록 성격
    - 인라인 성격처럼 요소의 너비가 콘텐츠의 크기만큼만 차지하지만, 그 외의 성격은 블록 성격
    - img 태그를 사용할 때 웹 브라우저의 수평 공간이 남이 있으면 한 줄로 배치
  - display 속성
    - HTML 태그가 기본으로 가지고 있는 박스 모델의 성격을 display 속성을 사용하여 변경 가능

<!-- width & height ==>

	<style>
        div{
            width:100px;
            height:100px;
            border:1px solid black;
        }
    </style>
</head>
<body>
    <div></div>
</body>

<!-- box-sizing 사용-->

	<style>
        div{
            width:100px;
            height: 100px;
            padding: 10px;
            border: 1px solid black;
            margin:10px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div></div>
</body>

<!-- display 사용 -->

    <style>
        h1, h2{
            display:inline;
        }
    </style>
</head>
<body>
    <h1>h1 tag</h1>
    <h2>h2 tag</h2>
</body>

4. 배경 속성으로 요소의 배경 설정하기

backgroud-color 속성
: 요소의 배경에 색상 넣기

    <style>
        div{
            width:100px;
            height:100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div></div>
</body>

background-image 속성
: 속성값은 삽입할 이미지의 경로를 url() 함수로 지정

    <style>
        div{
            width: 160px;
            height: 120px;
            background-image:url('image/photo1.jpg');
        }
    </style>
</head>
<body>
    <div></div>
</body>

👀 크기가 맞지 않군..width와 height의 px를 조절해가야 함! 이 때, no-repeat를 사용하면 한장만 보이게 할 수 있다

background-repeat 속성
: 요소의 배경 크기가 삽입하려는 이미지보다 크면,
이미지를 자동으로 반복해서 채우는데 이 때 이미 반복설정을 바꾸는 속성

    <style>
        div{
            width: 3000px;
            height: 2000px;
            background-image:url('image/photo1.jpg');
        }
    </style>
</head>
<body>
    <div></div>
</body>

background-position 속성
: 삽입하려는 이미지의 위치 결정

    <style>
        div{
            width:2000px;
            height:2000px;
            border:1px solid balck;
            background-image: url('image/photo1.jpg');
            background-repeat: no-repeat;
            background-position:100%;
        }
    </style>
</head>
<body>
    <div></div>
</body>

background-attachment 속성
: 요소에 삽입된 이미지를 스크롤할 때, 이미지의 작동 방식 결정

    <style>
        body{
            height:100px;
        }
        .parent{
            width: 2000px;
            height: 2000px;
            border: 1px solid black;
            overflow:scroll;
        }
        .children{
            height:2000px;
            background-image:url('image/photo1.jpg');
            background-attachment:scroll;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="children"></div>
    </div>
</body>

background 속성으로 한 번에 지정하기

    <style>
        div{
            width:160px;
            height:120px
            /*
            background-color:red;
            background-image:url('iamge/photo1.jpg');
            background-position:center;
            background-size:100% 100%;
            background-attachment:fixed;
            */
            background:red url('image/photo1.jpg') no-repeat center/100% 100% fixed;
        }
    </style>
</head>
<body>
    <div></div>
</body>

5. 위치 속성으로 HTML 요소 배치하기

relative
: 요소를 좌표 속성에 따라 배치 가능

    <style>
        .box{
            width:100px;
            height:100px;
        }
        .red-box{
            background-color: red;
        }
        .green-box{
            background-color: green;
            position:relative;
            left:100px;
        }
        .blue-box{
            background-color: blue;;
        }
    </style>
</head>
<body>
    <div class="box red-box"></div>
    <div class="box green-box"></div>
    <div class="box blue-box"></div>
</body>

    <style>
        .box{
            width:100px;
            height:100px;
        }
        .red-box{
            background-color: red;
        }
        .green-box{
            background-color: green;
            position:relative;
            left:100px;
            top:100px;
        }
        .blue-box{
            background-color: blue;;
        }
    </style>
</head>
<body>
    <div class="box red-box"></div>
    <div class="box green-box"></div>
    <div class="box blue-box"></div>
</body>

absolute
: relative일 때는 기준이 요소의 왼쪽 위 모서리였지만,
absolute일 때는 웹 브라우저의 왼쪽 위 모서리

    <style>
        body{
            margin: 0;
        }
        .box{
            width:100px;
            height:100px;
        }
        .red-box{
            background-color: red;
        }
        .green-box{
            background-color: green;
            position:absolute;
            left:100px;
            /*top:100px;*/
        }
        .blue-box{
            background-color: blue;;
        }
    </style>
</head>
<body>
    <div class="box red-box"></div>
    <div class="box green-box"></div>
    <div class="box blue-box"></div>
</body>

fixed
: position 속성값을 fixed로 지정하면, 해당 요소는 지정된 위치에 고정

    <style>
        body{
            margin: 0;
            height: 4000px;
        }
        .box{
            width:100px;
            height:100px;
        }
        .red-box{
            background-color: red;
        }
        .green-box{
            background-color: green;
            position:fixed;
            left:100px;
            top:100px;
        }
        .blue-box{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box red-box"></div>
    <div class="box green-box"></div>
    <div class="box blue-box"></div>
</body>

sticky
: 스크롤 중에 일정 지점(임계점)이 되면 요소가 fixed 값처럼 작동

    <style>
        body{
            margin: 0;
            height: 4000px;
        }
        .box{
            width:100px;
            height:100px;
        }
        .red-box{
            background-color: red;
        }
        .green-box{
            background-color: green;
            position:sticky;
            top:0px;
        }
        .blue-box{
            background-color: blue;;
        }
    </style>
</head>
<body>
    <div class="box red-box"></div>
    <div class="box green-box"></div>
    <div class="box blue-box"></div>
</body>

z-index 속성
: position 속성으로 배치한 요소의 z축 위치 결정

    <style>
        .box{
            width:100px;
            height:100px;
        }
        .red-box{
            background-color: red;
            position: relative;
            /* z-index:10; */
        }
        .green-box{
            background-color: green;
            position:absolute;
            left:0px;
            top:0px;
        }
    </style>
</head>
<body>
    <div class="box red-box"></div>
    <div class="box green-box"></div>
</body>

👀 z-index를 실행하면,

이미지 요소와 텍스트 요소 배치하기

    <style>
        img{
            float:left;
            margin-right:1rem;
        }
    </style>
</head>
<body>
    <img src="images/inside_out.jpeg" alt="슬픔이">
    <p>라일리가 태어났을 때 기쁨이와 같이 태어났다. 그때 기쁨이가 생기고 33초만에 슬픔이가 생겼다.
    </p>
</body>

블록 성격 요소를 인라인 성격 요소처럼 배치하기

    <style>
        div{
            color:white;
        }
        .red-box{
            background-color: red;
        }
        .blue-box{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="red-box">red-box</div>
    <div class="blue-box">blue-box</div>
</body>

👀빨간색 요소의 float 속성값을 left로 지정

clear 속성
: float 속성을 해제할 때 사용하는 속성
- left: float 속성의 left 값 해제
- right: float 속성의 right 값 해제
- both: float 속성의 left와 right 값 모두 해제

    <style>
        .box{
            width:100px;
            height: 100px;
        }
        .red-box{
            background-color: red;
            float: left;
        }
        .green-box{
            background-color: green;
            float: left;
        }
        .blue-box{
            background-color: blue;
            clear:left;
        }
    </style>
</head>
<body>
    <div class="box red-box"></div>
    <div class="box green-box"></div>
    <div class="box blue-box"></div>
</body>