[TIL] HTML layout & CSS 기초(1): HTML layout, CSS Selector, Inherit, Attribute - 221012

1afterwon·2022년 10월 13일
CSSInheritTILattributehtmlselector
1

TIL-HTML+CSS+자바스크립트

목록 보기
2/3
HTML layout & CSS 기초(1)
  1. HTML layout (Semetic tag)
  2. CSS 특성과 선택자 (Selector)
  3. 자식/하위/동위 선택자 (Inherit)
  4. 속성 선택자 (Attribute)
  5. Board 만들기
  6. 예제: 방명록 만들기

1. HTML layout (Semetic tag)

기본적으로 HTML의 layout은 Header (머릿말), Body (본문), Footer (꼬릿말)로 구성되어 있고 nav, aside 등이 추가되기도 한다.


출처: W3C school (https://www.w3schools.com/)

물론 div tag, p tag 등과 CSS를 이용하여 웹페이지를 꾸며도 사용자 입장에서는 크게 차이가 없다고 한다. 하지만 HTML에서 지원하는 header, article, footer 등의 tag를 이용하면 개발자들이 코드상에서 더욱 쉽게 구분할 수 있다고 한다.
아래 두 코드는 웹페이지에서 사용자가 보기엔 같지만, 개발자 입장에서 보기에는 가독성이 더 높다고 한다.
<body>
    <!-- header -->
    <div>
        <h1>MY HOMPAGE</h1>
    </div> 
    <hr>

    <!-- body -->
    <div>
        <div>
            <ul>
                <li>HTML5</li>
                <li>CSS3</li>
                <li>JAVASCRIPT</li>
                <li>JQUERY</li>
            </ul>
            
        </div>

        <div>
            <h3>B</h3>
            <h3>O</h3>
            <h3>D</h3>
            <h3>Y</h3>
            <h3>2</h3>
        </div>

       
    </div>
    <hr>

    <!-- footer -->
    <div>
        <p>SEOUL</p>
    </div>
</body>
<body>

    <!-- header -->
    <header>
        <h1>MY HOMPAGE</h1>
    </header>
    <hr>

    <!-- body -->
    <section>
        <nav> <!-- 보통 메뉴-->
            <ul>
                <li>HTML5</li>
                <li>CSS3</li>
                <li>JAVASCRIPT</li>
                <li>JQUERY</li>
            </ul>
        </nav>

        <article> <!-- 보통 본문 -->
            <h3>B</h3>
            <h3>O</h3>
            <h3>D</h3>
            <h3>Y</h3>
            <h3>2</h3>
        </article>
    </section>
    <hr>

    <!-- footer-->
    <footer>
        <p>SEOUL</p>
    </footer>
</body>
HTML의 아주 간단한 기본들은 이렇게 배웠고 이것을 기본으로 CSS를 이용해 기능을 넣는 것을 공부할 것이다.

2. CSS 특성과 선택자 (Selector)

CSS란?
Cascading Style Sheet의 약자로 HTML의 요소들이 웹페이지에서 어떻게 보이는지, 기능적인 역할을 정의하는 언어이다.
cascading이 들어 가는 건 하위 선택자에게 기능을 물려주거나, 덮어씌기 등이 가능해서인 것 같은데 정확히는 모르겠다.
CSS은 CSS를 적용할 대상을 정하는 selector와 대상의 글꼴, 여백 등을 꾸며주는 style로 구성된다. HTML 코드 작성 시 html 파일의 head에 아래와 같이 작성하거나, 따로 CSS 파일을 생성하여 style tag 없이 작성하면 된다.
<style>
    span{ /*span tag를 대상으로 하는 selector*/
			color: blue; /*색, 크기, 글씨굵기를 바꿔주는 style*/
			font-size: 30px; 
			font-weight: bold;
		}
</style>
위의 CSS를 적용한 text는 CSS 적용한 span 와 같이 나오게 된다.
이와 같은 selector를 tag selector라고 하고 class selector, id selector 등 다양한 selector가 있고 그에 따라 코드를 작성하는 법도 조금씩 다르다. 
<style>
	*{font-size:20px} /* 모든 데이터들에 적용 */
    div{color: blue;} /* div tag에 적용 */
    .one{font-weight: bold;} /*one class에 적용*/
    #two{font-family: 궁서체;} /*two id에 적용*/
</style>
모든 데이터들에 적용할 때는 *, tag에 적용할 때는 tag 종류, class에 적용할 때는 .class이름, id에 적용할 때는 #id이름 으로 CSS를 작성하면 된다.

3. 자식/하위/동위 선택자 (Inherit)

HTML에서는 tag, class, id의 밑의 계층으로 다른 tag, class, id가 들어갈 수 있고, 이를 선택하는 것을 자식(Child)/하위(Descendant) selector라고 한다. 자식 selector는 바로 아래 계층에 있는 것만 선택할 수 있고, 하위 selector는 아래 계층에 있는 모든 것을 선택할 수 있다. 자식/하위 selector는 아래와 같이 쓸 수 있다.

<style>
	#one > .menu{color: green;} /*one id의 자식(바로 아래)인 menu를 선택*/
    #one .menu{color: green;} /*one id의 아래에 있는 menu를 선택 (몇 번째 인지 상관없다)*/
</style>
당연히 같은 계층에 있는 동위 tag도 선택할 수 있으며 이는 일반 동위(general sibling)/인접 동위(adjacent sibling) selector를 통해 가능하다. 일반 동위 selector는 같은 계층의 모든 tag를 선택하며 '~'를 통해 가능하고, 인접 동위 selector는 같은 계층의 바로 뒤에 나오는 tag를 선택하며 '+'를 통해 가능하다.

	<style>
		
		#content > .title ~ div{ /*일반 동위 selector */
			font-size: 20px;
			color: blue;
		}
		
		#content > .title + div{ /*인접 동위 selector*/
			font-size: 9px;
			color: yellow;
		}
		
	</style>


4. 속성 선택자 (Attribute)

특정 속성을 갖는 tag를 선택하는 selector도 존재하고 이를 속성 selector라고 한다. 속성 selector는 내 기준에 좀 복잡하니... 눈에 좀 익혀야 될 것 같다. 기본적으로 값이 같은 것, 값과 앞/뒤가 같은 것, 값을 포함하는 것을 선택할 수 있다.
<style>
	/*
	selector[attr]{key:value};            : attr 속성명이 있는 태그를 선택
	selector[attr = "value"]{key:value};  : attr 속성 값과 value가 일치하는 태그 선택
	selector[attr $= "value"]{key:value}; : attr 속성 값과 value에 대항하는 문자로 끝나는 태그를 선택
	selector[attr ^= "value"]{key:value}; : attr 속성 값과 value에 해당하는 문자로 시작하는 태그를 선택 
	selector[attr *= "value"]{key:value}; : attr 속성 값과 value에 해당하는 문자가 포함하는 태그를 선택
	*/
    		input[type]{
			color: orange;
		}

		img[alt]{
			color: red;
		}

		input[type="text"]{ /* type이 text인 input */
			font-size: 30px;
		}

		span[id ^= "complex"]{ /* complex로 시작하는 id */
			color: blue;
		}

		span[id $="text1"]{ /* 끝이 text1로 끝나는 id*/
			font-size: 30px;
		}

		span[id *= "text"]{ /* text를 포함하는 id */
			background-color: yellow;
		}
    
</style>

속성 selector 는 좀 더 써봐야 익숙해질 것 같다 ㅠㅠ


5. Boarder 만들기

CSS로 boarder를 만들어서 나름 홈페이지 느낌이 나게? 꾸밀 수 있는데 그냥 box 모양 버튼을 만든다고 생각하면 편하다. 기본적으로 'border: 줄형식 줄굵기 색깔' 으로 만들고 자세한 걸 수정해서 만든다. (exp. border: solid 1px black;) 그 가로 세로 크기나 글자정렬 등으로 예쁘게 만드는데 이것도 익숙해져야 될 듯하다.
<style>
.myBorderStyle{
			border-top-style: solid; /*border: solid 5px red; 와 동일*/
			border-top-width: 5px;
			border-top-color: red;

			border-right-style: dotted; /*top right 이런 식으로 부분마다 설정할 수도 있음*/
			border-right-width: 1px;
			border-right-color: blue;

			border-bottom-style: solid;
			border-bottom-width: 3px;
			border-bottom-color: black;

			border-left-style: dashed;
			border-left-width: 5px;
			border-left-color: red;

			width: 150px;
			height: 100px;
			text-align: center; /*text 가로 중앙 정렬*/
			line-height: 100px; /*세로 중앙 정렬*/
			}
</style>
여기서 주의해야 할 점은 block tag (p tag, div tag, ul tag 등)으로만 boader를 만들 수 있고 inline tag (span tag 등)으로는 boader를 만들 수 없다!! inline tag를 boader로 만들려면 style에서 'display:block;' 을 이용해야 가능하다!


6. 예제: 방명록 만들기

이때까지 배운 걸 바탕으로 방명록을 한 번 만들어봤다. 현재는 input으로 데이터를 보낼 서버가 딱히 없어서 #으로 비워두고 만들었다. '!DOCTYPE html' 부터는 html 확장자에, 그 위로는 CSS 확장자에 작성 후 불러오는 식으로 해봤다.
.formStyle{
    border: solid 0px red;
    width: 410px;
    height: 155px;
    margin: 10px auto;
    /*margin: top-right-bottom-left 순서
      margin: top,bottom-right,left (2개 썻을 시)
      margin: top-right,left-bottom*/
}

.title{
    border: solid 0px blue;
    width: 400px;
    height: 30px;
    text-align: center;
    line-height: 30px;
}

.content{
    border: solid 0px green;
    width: 400px;
    height: 90px;
    margin-top: 2px;
    text-align: center;
}

<!DOCTYPE html>
<html lang="en">
<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>
    <link rel="stylesheet" href="./12.Guest.css">
</head>
<body>
    <form action="#" method="get" class="formStyle">
	    <div class="title">
            <label>이름</label>
            <input type="text" name= "irum" size="12">

            <label>비밀번호</label>
            <input type="password" name="pwd" size="12">
        </div>
        <div class="content">
            <textarea rows="5" cols="53" name="msg"></textarea>
        </div>
        <div class="title" style="text-align: right;">
            <input type="submit" value="확인">
            <input type="reset" value="취소">
        </div>
    </form>
</body>
</html>

그 결과 웹페이지 정 가운데에 방명록이 딱 나왔다! tag에 아직 덜 익숙해도 하나씩 수치 바꿔보면 눈에 바로바로 보여서 공부하기가 조금은 수월한거 같다.
내일은 CSS filter selector와 layout에 대해 공부하고 실제로 홈페이지 처럼 뭔가 만들어 볼 예정이다!
이미 하루씩 밀리고 있다... 빨리 복습 해야지 ㅠㅠ

profile
1afterwon
주로 Github에는 코드를, velog에는 이론을 정리합니다!
이전 포스트

[TIL] HTML 기초: HTML 특징, 기본 tag, Input과 Form - 221011

다음 포스트

[TIL] CSS 기초(2) & 연습하기: filter selector, 웹페이지 만들어보기 - 221013

0개의 댓글