본문 바로가기
공부기록/CSS

2월 23일 (2) CSS selector 2, z-index, display, flex

by project100 2023. 2. 23.

3. 구조 가상 선택자

HTML 요소의 계층 구조를 기반으로 선택

1) :nth-child(n) - 테이블에서 많이 사용된다.

  • border의 색은 아무것도 지정하지 않으면 검정색이지만 글자색에 따라서 표현된다. 
  • n, odd, even 반복활용 가능, 수치를 정해주면 그 수치에 지정된 것만 활용할 수 있다.
  •  n  수식이나 특정한 키워드를 사용
  • even(짝수), odd(홀수), 2n, 3n 등 

2) :first-child - 동일 계층의 첫 번째 요소 선택

3) :last-child - 동일 계층의 마지막 요소 선택

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>구조 가상 선택자</title>
    <style>
        h3:first-child {
            color: khaki;
        }
        h3:nth-child(even) {
            color: red;
        }
        h3:last-child {
            color: blue;
        }
        h3:nth-child(odd) {
            background-color: rgb(250, 128, 114);
        }
        h3:nth-child(8) {
            border: 1px dotted;
        }
    </style>

</head>
<body>
    <h3>프론트엔드 프로그래밍</h3>
    <h3>프론트엔드 프로그래밍</h3>
    <h3>프론트엔드 프로그래밍</h3>
    <h3>프론트엔드 프로그래밍</h3>
    <h3>프론트엔드 프로그래밍</h3>
    <h3>프론트엔드 프로그래밍</h3>
    <h3>프론트엔드 프로그래밍</h3>
    <h3>프론트엔드 프로그래밍</h3>
    <h3>프론트엔드 프로그래밍</h3>
    <h3>프론트엔드 프로그래밍</h3>
    <h3>프론트엔드 프로그래밍</h3>
    <h3>프론트엔드 프로그래밍</h3>
</body>
</html>

 

4. 구조적 조합 선택자

계층화된 요소들 간의 부모, 자식 관계로 선택

1) '  ' 공백 : 후손 선택자 

요소선택자 + '  ' + 후손 요소 선택자

예) div li

 

2) > : 자손(자식) 선택자, 바로 직계하위만 가능하다.

요소선택자 + > + 자손 요소 선택자

예) div>h2

 

3) + : 인접 형제 선택자, 인접 형제 태그 하나만 선택한다.(밑, 뒤로만 적용된다.)

요소선택자 + '+'  + 형제 요소 선택자

예) h1+h2

 

4) ~ : 모든 형제 선택자

요소선택자 + ~ + 형제 요소 선택자

 

5) , : 그룹 선택자

요소선택자, 요소선택자

예) tabel, th, td 

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>계층 선택자</title>
    <style>
        div>strong {
            color: rgb(233, 90, 24);
        }

        div strong {
            background-color: aquamarine;
        }

        li>strong {
            border: 1px solid rgb(158, 35, 196);
        }

        ul strong {
            border-bottom: 2px dashed lavender;
        }

        ul>li {
            color: orangered;
        }

        h3+ul {
            color: darkorchid;
        }

        h4+p {
            background-color: aquamarine;
        }
        h4~p {
            border: 2px dotted seagreen;
        }
    </style>
</head>

<body>
    <hr>
    <div>
        <div>다음 <strong>학습 내용</strong></div>
        <ul>
            <li>HTML5</li>
            <li><strong>CSS3</strong></li>
            <li>Javascript</li>
        </ul>
        <div>그 다음은 JAVA</div>
    </div>
    <hr>
    <h2>인접 형제 선택자</h2>
    <div id="d1">
        <h2>인접형제 제목1</h2>
        <h3>인접형제 제목2</h3>
        <ul>이글자는 무슨색
            <li>주제1</li>
            <li>주제2</li>
        </ul>
        <p>인접형제 선택자에 의한 스타일 적용</p>
        <p>인접형제 선택자에 의한 스타일 적용</p>
        <h4>인접형제 제목3</h4>
        <p>인접형제 선택자에 의한 스타일 적용</p>
        <p>인접형제 선택자에 의한 스타일 적용</p>
        <h4>인접형제 제목4</h4>
        <p>인접형제 선택자에 의한 스타일 적용</p>
    </div>
</body>

</html>

 

5. 속성 선택자 : 요소의 속성명, 속성값으로 선택 단, class와 id는 제외

형식 [attr="value"]

<input type="text">, <a href="url">

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>속성 선택자</title>
    <style>
        [text] {
            background-color: goldenrod;
        }
        [text="red"] {
            color: red;
        }
        /* input 태그 관련 스타일 */
        [type="text"], [type="password"] {
            background-color: gainsboro;
            color: slateblue;
        }
        input::placeholder{
            color: white;
        }
        /*link 관련 스타일*/
        [href="http://naver.com"] {
            border: 1px solid brown;
        }
        a {
            text-decoration: none;
        }
    </style>
</head>
<body>
    <form>
    <fieldset>
        <legend>회원 가입</legend>
        <input type="text" name="id" placeholder="아이디를 입력하세요."><br>
        <input type="password" name="pwd" placeholder="비밀번호를 입력하세요."><br>
        <input type="text" name="name" placeholder="이름을 입력하세요."><br>
        <input type="text" name="phone" placeholder="연락처를 입력하세요."><br><br>
        <input type="submit" value="회원가입">
        <input type="reset" value="취소">
    </fieldset>
</form>
<hr>
<p text="hello">안녕하세요.</p><!--이건 없는 속성, 사용자 정의 속성-->
<p text="red">빨간색입니다.</p>
<p><a href="http://naver.com">네이버</a></p>
<p><a href="http://icia.co.kr">인천일보아카데미</a></p>
</body>
</html>

 

z-index : 

중첩된 요소의 쌓이는 순서를 지정하는 속성, 작은 번호가 밑에, 큰 번호가 위에 위치

positon과 같이 사용, 의도된 중첩

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>z-index</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            position: absolute;
        }
        .z1 {
            top:0;
            left:0;
            background-color: red;
            z-index: 3;
        }
        .z2 {
            top: 30px;
            left: 30px;
            background-color: green;
            z-index: 2;

        }
        .z3 {
            top: 60px;
            left: 60px;
            background-color: blue;
            z-index: 1;
        }
    </style>
</head>
<body>
    <div class="z1 box">box1</div>
    <div class="z2 box">box2</div>
    <div class="z3 box">box3</div>
</body>
</html>

display :  변형시킴

요소의 표시 여부와 방법을 지정하는 속성

화면상에서 요소를 숨기거나 보이게 또는 인라인 요소를 블록요소(그 반대로도) 표현하게 함

html이 원래 제공하던 양식을 파괴시킨다.

 

속성값

1) none : 화면상에서 요소를 제거 (자리까지)

2) block : 요소를 블록형식으로 표시

3) inline : 요소를 인라인 형식으로 표시

4) inline-block : 요소가 인라인과 블록 형식의 두 성격을 갖도록 지정

span에 크기를 지정하기 어렵다.

 

 

 

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>화면표시(display)</title>
    <style>
        .a1 {
            display: block;
        }

        li {
            display: inline;
        }

        span {
            width: 100px;
            height: 100px;
            padding: 5px;
            border: 1px solid darkcyan;
            background-color: skyblue;
        }

        .a {
            display: inline;
        }

        .b {
            display: inline-block;
        }

        .c {
            display: block;
        }
    </style>
</head>

<body>
    <h3>블록 형식으로 보이게 하기</h3>
    <a class="a1" href="#">링크1</a>
    <a class="a1" href="#">링크1</a>
    <a class="a1" href="#">링크1</a>
    <h3>인라인 형식으로 보이게 하기</h3>
    <ul>
        <li><a href="#">메뉴1</a></li>
        <li><a href="#">메뉴2</a></li>
        <li><a href="#">메뉴3</a></li>
    </ul>
    <hr>
    <h3>inline vs inline-block vs block</h3>
    <h4>inline</h4>
    <div>
        Lorem
        <span class="a">ipsum</span>
        <span class="a">dolor</span>
        sit amet,
        consectetur adipiscing elit.
    </div>
    <h4>inline-block</h4>
    <div>
        Lorem
        <span class="b">ipsum</span>
        <span class="b">dolor</span>
        sit amet,
        consectetur adipiscing elit.
    </div>
    <h4>block</h4>
    <div>
        Lorem
        <span class="c">ipsum</span>
        <span class="c">dolor</span>
        sit amet,
        consectetur adipiscing elit.
    </div>
</body>
</html>

 

5) table : 요소를 테이블형식으로 표시(clear-fix에서 사용)[after나 before 가상으로 만들 때 사용]

6) flex : 컨테이너 요소에 설정하여 내부 요소를 flexbox 형식으로 표현

 

visibility : 요소를 보이게 한다.(기본값)

hidden : 요소를 숨김

    요소제거             요소 숨김

display: none; vs visibility: hidden;

 

제거 - 요소를 차지하는 공간까지 없애는 것

숨김 - 요소가 차지할 공간은 유지되고, 보이지만 않게 하는 것

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>화면표시(display)</title>
    <style>
        #container div {
            background-color: wheat;
            width: 200px;
            height: 100px;
            border: 1px dashed;
        }
        .b1 {
            display: none;
        }
        .b2 {
            visibility: hidden;
        }
    </style>
</head>
<body>
<div id="container">
        <h3>display:none</h3>
        <div class="b1">보이나요?</div>
        <div id="d1">이건 더미..</div>
        <h2>visiblity:hidden</h2>
        <div class="b2">보이나요?</div>
        <div id="d2">이건 더미..</div>
    </div>
</body>
</html>

 

p 412

display: flex; - Flexible Box, flexbox라고 함

컨테이너 요소 (부모요소)에 설정

 

1) flex-direction : 내부 요소의 배치 방향

row :왼쪽부터 가로로 배치(기본값)

컨테이너 요소 배치된 요소를 가로로 배치시킨다.

row-reverse : 오른쪽부터 가로로 배치

column : 위에서 아래로 세로로 배치

column-reverse : 아래에서 위로 배치

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>플렉스</title>
    <style>
        .flexbox {
            margin: 10px;
            padding: 15px;
            height: 400px;
            border-radius: 5px;
            background-color: peru;
            display: flex;
            flex-direction: column;
        }

        .item {
            margin: 10px;
            padding: 20px;
            background-color: beige;
            color: rgb(13, 80, 57);
            border-radius: 5px;
        }
    </style>
</head>

<body>
    <div class="flexbox">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item4</div>
    </div>
</body>

</html>

 

2) flex-wrap : 내부 요소의 줄 바꿈 설정

nowrap : 줄 바꿈 없음 (overflow 발생)

wrap : 자동 줄바꿈 (overflow 시 밑으로)

wrap-reverse :  자동 줄바꿈 (overflow 시 위로) 

 

flex item(내부 요소 속성)

1) flex-basis :  내부 요소의 기본 크기를 설정하는 속성

fiex-direction이 row 일 때는 너비 속성, column일 때는 높이 속성으로 사용

 

속성값

auto : 기본값 (자동설정)

수치 : px, % 등 실제 값을 넣는다.

내용에 따른다 : content

 

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>플렉스</title>
    <style>
        .flexbox {
            margin: 10px;
            padding: 15px;
            height: 400px;
            border-radius: 5px;
            background-color: peru;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap-reverse;
        }

        .item {
            margin: 10px;
            padding: 20px;
            background-color: beige;
            color: rgb(13, 80, 57);
            border-radius: 5px;
            flex-basis: 150px;
            flex-grow: 1;
        }
    </style>
</head>

<body>
    <div class="flexbox">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item4</div>
    </div>
</body>

</html>

 

:last-child 실습 때 왜 색이 안 나오는지 의문이었는데, 순서가 바뀌어서 색이 나오지 않는 것이었다.

순서에 따라서 보일 수도 있고 안 보일 수도 있기 때문에 순서를 어떻게 배치할지 항상 고려해야 할 것 같다.

 

저작자표시 비영리 변경금지

'공부기록 > CSS' 카테고리의 다른 글

2월 27일 (1) CSS - transform, transition  (0) 2023.02.27
2월 24일 CSS - flexbox  (0) 2023.02.24
2월 23일 (1) CSS clear, selector1  (0) 2023.02.23
2월 22일 (2) CSS 공간 처리  (0) 2023.02.22
2월 22일 (1) CSS font  (0) 2023.02.22

관련글

티스토리툴바