[CSS] selector 문법으로 css 코드 양 줄임

 

💾 Editor: VSCode

---

👉 참고

        <div class="blog-content"> <!-- 왼쪽 -->
            <div> <!-- 프로필 사진, 이름 -->
                <img src="main.jpg" class="blog-profile">
                <div class="blog-name">
                    <h4 style="margin:5px">이름</h4>
                    <p style="margin:5px">날짜</p>
                </div>
            </div>
            <div style="clear:both"></div> <!-- 가상의 박스 추가 -->
            <div style="margin-top: 10px;"> <!-- 글제목, 내용 -->
                <h4>블로그 글</h4>
                <p>가성비 맛집 발견</p>
            </div>
        </div>

 

float 준 다음에 margin-top이 안 먹힐 경우에는 float 준 요소 다음에 clear:both 넣은 <div> 추가함

 

---

👉 navbar 만들기

layout1.html (1)

    <nav>
        <ul class="navbar">
            <li>영화</li>
            <li>맛집</li>
            <li>IT</li>
            <li>컴퓨터</li>
        </ul>
    </nav>

• <div> 대신에 <nav> 사용. 기능은 똑같음

style.css

.navbar li {
    display: inline-block;
}

 

• selector 문법 공백: '~안에 있는' 모든 자식
• selector 문법 > : '~안에 있는' 직계 자식

 

layout.html (2)

    <nav>
        <ul class="navbar">
            <li><a href="#"> 영화 </a></li>
            <li><a href="#">맛집</a></li>
            <li><a href="#">IT</a></li>
            <li><a href="#">컴퓨터</a></li>
        </ul>
    </nav>

• <a> 태그 추가. 경로가 지정되지 않았을 경우에는 "#" 이런 형태로 우선 작성

style.css

/* 내비게이션 */
.navbar li {
    display: inline-block;
    width: 60px;
    text-align: center;
    background-color: #eee;
    padding: 10px;
    border-radius: 5px;
}

.navbar a {
    font-size: 16px;
    text-decoration: none;
    color: black;
}

• <li> 태그와 <a> 태그 각각 스타일링함

 

---

👉 참고

practice.html (수정전)

    <div class="container">
        <div>
            <div>
                <p>
                    <span>하이</span>
                    <span>하이</span>
                </p>
            </div>
        </div>
    </div>

styls.css

.container>div>div>p>span {
    color: red;
}

• selector 문법 사용 시, 위와 같이 작성하는 건 지양
• 어떤 선택자를 선택하는지 알기 어려움

 

practice.html (수정 후)

    <div class="container">
        <div>
            <div>
                <p class="headline"> <!-- class 추가 -->
                    <span>하이</span>
                    <span>하이</span>
                </p>
            </div>
        </div>
    </div>

style.css

.headline span {
    color: red;
}

• 이런 식으로 바로 위 부모에 class를 준 후에 사용하는 것을 지향
• 코드를 봤을 때 어디에 어떤 style을 줬는지 확인하기 더 용이함

 

---

👉 실습

layout1.html

    <nav>
        <ul class="navbar">
            <li><a href="#"> 영화 </a></li>
            <li><a href="#">맛집</a></li>
            <li><a href="#">IT</a></li>
            <li><a href="#">컴퓨터</a></li>
        </ul>
    </nav>

style.css

.navbar { /* 추가 */
text-align: center;
}

.navbar li {
    display: inline-block;
    width: 60px;
    text-align: center;
    background-color: #eee;
    padding: 10px;
    border-radius: 5px;    
}

.navbar a {
    font-size: 16px;
    text-decoration: none;
    color: black;
    font-weight: bold; /* 추가 */
}

.navbar a:hover { /* 추가 */
    color: red;
}

• 강의 중 실습했던 거에서 약간 수정을 함
• 내비게이션 가운데 정렬을 했고, css에 a:hover 추가!

 

🐥 nav 안 list 가운데 정렬

.navbar { 
    margin-left: auto;
    margin-right: auto;
}

• 가운데 정렬을 할 때 css에서 기존에 쓰던 위와 같은 방식의 가운데 정렬을 사용했었다
• <nav>도 <div>와 같은 기능이니까, 가로행을 차지할 테고?
• <ul> 안에 <li>도 각각 가로행을 차지하고 있었던 터라, 위처럼 코드를 작성하면 당연히 가운데 정렬이 될 거라고 생각했다
• 하지만 가운데 정렬이 안 됨
• 왜???

 

.navbar { /* 추가 */
text-align: center;
}

• .navbar에 'text-align'을 주니까, 가운데 정렬이 되었다
• 왜 이런지 생각을 해봤다
• 저 위처럼 사용했을 때는 div 안에 또 다른 div와 같은 블록이 있을 때 가운데 정렬이 되었다
• 하지만 ul이나 li 같은 경우는 블록 형태가 아닌, text로 인식이 되어서 계속 해왔던 방식으로 안 되고 있는 것 같다.
• <nav> 태그에 원래 쓰던 방식을 사용하고, width 값을 줬을 때는 nav 자체는 가운데 정렬이 됨
• 다만 nav 안에 list는 기존의 방식이 아닌, 'text-align'을 사용해야 한다

 

🐥 <div>의 가운데 정렬

practice.html

    <div class="one">
        <div class="two"></div>
    </div>

style.css

.one {
    background-color: black;
    width: 500px;
    height: 300px;
    margin-right: auto;
    margin-left: auto;
}

.two {
    background-color: gold;
    width: 300px;
    height: 200px;
    margin-right: auto;
    margin-left: auto;
}

• 직접 해보니 알겠다. (👍)

 

 

 

코딩애플 공부 기록