HTML 태그중에는 특정 속성이 있다. 태그의 개수도 많지만 거기다 속성까지 다양하니까 복잡하다.

 

CSS가 분리되서 나온 것은 HTML 태그는 마크업이란 뜻에 맞게 구조의 표현에 집중하고 디자인 부분은 CSS (모질라 팀에서는 메이크업이라 한다)에 맡긴다는 취지인데 어쨋든 처음 배우는 입장에서는 복잡해 보인다.

 

가장 빠른 방법은 뭐가 되었던 직접 해보는 수 밖에 없다.

 

속성 선택자

속성 선택자는 태그의 속성을 선택하는 것이다. input의 속성이 다양하니 한번 적용해 보자.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input[type=text]{background: red;}
        input[type=password]{background: blue;}
        input[type=email]{background:yellow;}
        input[type=button]{color:teal; background:yellowgreen;}
    </style>
</head>
<body>
    <form>
        <input type="text"/><br/>
        <input type="password"/><br/>
        <input type="email"/><br/>
        <input type="button" value="제출하기"/><br/>
    </form>
    
</body>
</html>

모양은 같아도 input type이 각자 다르다. 배경색을 바꿔보면 구분이 되서 좋다. 물론 사용자에게 입력받는 폼양식을 이렇게 알록달록하게 할일은 없겠지만 속성을 지정하는 것이 어떤 것인지 알 수 있다. 분명 태그는 input 태그로 같다. 그런데 속성에 따라 달라지는 콤토넌트(부품)들을 볼 수 있다.

 

문법은 잘 볼 필요가 있다. style 안에서는 input[type=text] 로 지정하고 body에서는 <input type="text"/> 이다. 요런 테크닉에 익숙해지려면 눈이 좋아야 한다. 안그러면 다 비슷비슷해보인다.

 

후손선택자

body 태그는 계층 구조이다. 후손 선택자는 하위 구조를 선택한다. 바로 아래가 아니더라도 상관없다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #id1 h1 {color:indigo;}
        #id1 h2 {color:orangered;}
        div #id2 {color:slateblue;}
        div p {color:tomato;font-size: 1.5em;}
        .c1 h1 {color:yellowgreen;font-size: 3em;}
    </style>
</head>
<body>
    <div id ="id1">
        <div>
            <h1>Head Line h1</h1>
            <h2>Head Line h2</h2>
            <div>
                <h3 id="id2">Head Line h3</h3>
                <h4>Head Line h4</h4>
            </div>
        </div>
    </div>
    <div class="c1">
        <h1>Second Head Line</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Autem sint ut nemo ea ipsa deleniti ipsum consectetur 
            debitis voluptas. Nostrum consequuntur molestiae 
            consectetur, laudantium repellendus magni perferendis
             incidunt? Similique, tenetur.</p>
    </div>
    
</body>
</html>

예제는 썩 가독성이 좋은 코드는 아니다. 학습을 위해서 다양한 경우가 가능하다는 것을 표현하고 있을 뿐이다. HTML CSS 가 어려워지는 것은 코드는 항상 정리가 안되 보여서 그렇다. 어느 웹사이트나 그렇겠지만 설계를 명확하게 해야한다. 실제 웹에 뿌려지는 것을 브라우저로 열어보면 아주 복잡해진다.

 

포탈 같은 곳은 각종 스크립트 코드와 업데이트 내용을 실시간으로 뿌려주기 때문에 소스코드를 보면 읽을 수가 없다. 어디에 어떤 태그가 위치하는지 알고 있어야 선택자를 잘 사용할 수 있다.

 

네이버 페이지 원본 보기

아이디와 클래스를 적절하게 사용하면 도움이 된다. 전체 구조를 짠 후에 후손이 어디에 위치한지 파악하고 사용한다.

 

자손 선택자

바로 아래에 있는 요소를 자손이라고 한다. 후손은 바로 아래가 아니라 몇칸 더 떨어져도 후손이지만 자손은 바로 아래에 있어야 한다. 직계다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #id1 > h1 {color:olivedrab;}
        #id1 > p  {color:red;}
        #id2 > h2 {color:orangered;}
        #id2 > p  {color:royalblue;}
    </style>
</head>
<body>
    <div id="id1">
        <h1>타이틀 h1</h1>
        <p>내용적 내용</p>
    </div>
    <div id="id2">
        <h2>타이틀 h2</h2>
        <p>내용적 내용</p>
    </div>
</body>
</html>

div 가 2개이니까 각각 id를 발급해서 사용하면 세부적으로 나눠서 선택할 수 있다.

 

공유하기

facebook twitter kakaoTalk kakaostory naver band