TIL 20230516(HTML-Semantic Tags,Block요소와 Inline요소,CSS-선택자,부모자식요소,캐스케이딩,BOX모델,display,float,clear)

뿌링클 치즈맛·2023년 5월 16일

Elice AI트랙 8기

목록 보기

2/28

어제에 이어 HTML 강의~

HTML/JS/CSS 한 장 요약
HTML은 정보/설계도. 즉 뼈대의 기능을 한다.
JS는 웹페이지의 기능과 효과, 인간의 뇌와 장기 등의 역할.
CSS는 디자인과 스타일링. 사람의 이목구비와 피부,옷차림 등의 역할이다.

웹사이트 제작시 고려사항(강제적인 것은 아니지만, 검색엔진에 노출될 가능성이 높아짐)
1.웹 표준(웹사이트를 작성할 때 따라야 하는 공식 표준/기술 규격)
2.웹 접근성(사용자의 장애 여부와 관계없이 모두가 웹사이트를 이동할 수 있게 하는 것)
3.크로스 브라우징(휴대폰,TV 등의 기기와 모든 웹브라우저에서 사이트가 제대로 작동하게 하는 것)

HTML (Hyper Text Markup Language)

웹 페이지 표시를 위해 개발된 지배적인 마크업 언어. 또한,제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공함.
시간이 지나면서 자주 사용되지 않는 용어들은 사라지고, 새로운 신조어 태그들이 등장함.

1. HTML 태그 구성 요소

🍊를 먹은지 얼마나 🍊

<h3 style="color:orange">🍊를 먹은지 얼마나 🍊</h3>
<tag = h3> HTML이 갖고 있는 고유의 기능 (h1,img...) 열고 닫는 형식으로 입력</tag = h3>
attribute = style: HTML 태그가 갖고 있는 추가 정보. (src,href,,,)
value = color:orange: 어떤 역할을 수행할지에 대한 구체적 명령. ("이미지 링크",
contents = 🍊를 먹은지 얼마나 🍊: 태그 사이에 있는 내용

2. HTML 문서의 기본

<!DOCTYPE html> HTML5로 된 문서임을 선언/안 쓰면 브라우저에서 어떤 버전의 HTML인지 헷갈려함
<html> HTML문서 시작합니다~
  <head> 문서와 관련된 정보
    <meta charset="UTF-8"> 문자코드
    <title></title> 웹사이트 제목
    <link rel="stylesheet" src="style.css"> 외부 스타일시트 사용시 연결하기 위한 link태그
    <style></style> 내부 스타일 시트 사용시에도 head 내에 style 태그로 작성함
  </head>
  <body>웹사이트 내용
  </body>
 </html>HTML문서 끝~

<h1~h6>태그: Heading 태그, 제목/부제목 표현에 사용된다.
<p태그>: Paragraph 태그, 본문 내용을 표현한다. 웹사이트의 중요 정보를 담는 태그.
<ul태그>: Unordered list 태그, 순서가 없는 리스트 생성.
<ol태그>: Ordered list 태그, 순서가 있는 리스트 생성. type 속성값으로 A,a등을 주면 ABC,abc...의 순서로 리스트를 생성한다.

3. 구조를 잡을 때 사용하는 태그(Semantic Tags)

header와 nav

<img src="https://www.w3.org/html/logo/badge/html5-badge-h-solo.png" alt="HTML5 로고">
<header style="background-color: blueviolet; color: beige; font-weight: bold;">여기는 Header
  <nav style="background-color: aliceblue; color: black;">nav 영역
    <ul>
      <li>
        <a href="">홈</a>
      </li>
      <li>
        <a href="">메뉴</a>
      </li>
      <li>
        <a href="">나가기</a>
      </li>
    </ul>
  </nav>
</header>

일반적으로는 header에는 웹사이트의 머리글을 담고, nav에는 ul,li,a태그를 활용해 메뉴 버튼을 담는다.
main과 footer

    <main role="main" style="background-color: yellowgreen";> 
        main 영역<br>
        IE는 지원하지 않아 role="main"속성을 필수로 입력해야 함<br>
        main 영역<br>
        <article style="background-color: pink;">
            여기서부터 ARTICLE<br>
            문서의 주요 이미지나 텍스트 등의 정보를 담고 구역을 설정.
            태그 내에 구역을 대표하는 타이틀 < h1~h6 >태그가 존재해야 함<br>
            <h3>고양이</h3>
               *｡*.。*∧,,,∧<br>
            ヾ(⌒(_=•ω•)_<br>
            <br>
            <h3>플레이 리스트</h3>
                now ᴘʟᴀʏɪɴɢ: 파이팅 해야지 (Feat: 이영지)<br>
                ───────────⚪──────<br>
                ◄◄⠀▐▐⠀►► 𝟸:𝟷𝟾 / 𝟹:𝟻𝟼⠀───○ 🔊<br>
        </article>
    </main>
    <footer style="background-color: turquoise;">
        <div>
            이 부분은 footer>div
        </div>
        <div> <!-- div는 거실(body)에 쇼파 둘 공간 -->
            <p>작성일자:202305161042</p>
        </div>
    </footer>

그림때문에 br을 썼더니 좀 지저분해 보인다...

4. HTML 태그의 두 가지 성격

Block 요소

Y축 정렬 형태로 출력됨(줄바꿈 현상 나타남) 공간을 만들 수 있고(width,height 조절 가능),상하 배치 작업 가능
예시:< p,h1~h6,header,div> 태그

Inline 요소

a태그

줄바꿈현상의 유무, 공간에 대한 크기를 만들 수 있는지, 상/하 배치가 가능한지를 통해 구분

CSS(Cascading Style Sheet)

HTML로 작성된 정보를 꾸며주는 언어. 문서의 레이아웃과 스타일을 정의한다.

선택자=article{ 속성=background-color:속성값=pink;}

CSS는 외부 스타일시트/내부 스타일 시트/인라인 스타일을 통해 적용할 수 있다. 외부 스타일 시트를 사용하기 위해서는 .css 파일을 생성해 <link rel="stylesheet" href="style.css"> 를 head 태그 내에 작성해줘야 한다.
내부 스타일 시트는 head 태그 내에 style 요소 내부에 CSS스타일을 작성하면 되고, 인라인 스타일은 적용하고 싶은 태그에 style을 작성하면 된다. 인라인 스타일은 가장 유지보수가 어렵고 코드를 이해하기 힘들게 하므로 가장 추천하지 않는 방식이기도 하다.
전날 글 복붙

1. CSS 선택자

tag{background-color:green;}
#id{color:gray;}
.class{font-weight:bold;}

2. 부모 자식 관계

<header>
  This is Header
  <h1> Header</h1>
  <p> Contents</p>
  <h5> H5 </h5>
</header>

header{color:violet;}
h1{color: blue;}
p{color: green;}

This is Header

Header

Contents

H5

위 코드를 실제로 실행하면 위의 색상이 나타난다. header와 h1,p태그는 부모 자식 관계이고, h1과 p태그는 서로 형제관계이다. 부모 태그에 적용된 속성은 자식태그에도 적요되는데, 위 코드에서는 h1과 p태그에 각각 새로운 속성을 부여해줬으므로 header에 적용된 color:violet 속성이 css파일에 따로 속성을 지정하지 않은 This is Header와 H5에만 적용된다.

동일한 태그를 여러번 사용할 경우
header h1{ color:blue;}
처럼 부모를 구체적으로 표기해야 한다.

3. 캐스케이딩

<header>
  <h4> Hello World</h4>
  <p> This is CSS</p>
  <h5 style="background-color:pink" id="c" class="c">우선순위</h5>
</header>

h4{color:red;}
h4{color:green;}

header p{color:violet;}
p{color:yellow;}
#c{background-color:gray;}
.c{background-color:turquoise;}
h5{background-color:tomato;}
header h5{background-color:blue;}

CSS의 우선 순위를 결정하는 요소

순서: 나중에 적용한 속성값의 우선순위가 높음, 위 코드에서 Hello World는 초록색으로 출력됨
디테일: 더 구체적으로 작성된 선택자의 우선순위가 높음 p{color:yellow;}가 나중에 쓰였지만, header p가 더 구체적으로 작성되었기 때문에 This is CSS는 노란색으로 출력됨
선택자: 인라인태그인 style>id>class>type 순으로 우선순위가 높다. 예시참고) h5태그로 적힌 부분은 분홍색(style)으로 출력되고, style코드를 지우면 회색(id)#c를 지우면 turquiose색(class), .c를 지우면 파란색(header h5가 h5보다 우선 적용),header h5를 지우면 토마토색이 된다!

4. CSS 주요 속성

은 너무 많기에... width,height,font-family,font-weight,border-style, background-repeat(지정한 background image에 대한 반복효과),background-position(background image의 좌표 변경)

BOX 모델

border를 기준으로 바깥쪽은 margin, border 안쪽은 padding

div{margin  20px    10px   0  10px;}
            top  right bottom left

margin과 padding 작성 방법은 동일하다. top/right/bottom/left 시계방향 순서로 작성함

1. Inline요소와 Block요소

Block 요소

Y축 정렬 형태로 출력됨(줄바꿈 현상 나타남) 공간을 만들 수 있고(width,height 조절 가능),상하 배치 작업 가능
예시:< p,h1~h6,header,div> 태그

Inline 요소

+ ) margin,padding,bottom 값 적용 불가

a태그

줄바꿈현상의 유무, 공간에 대한 크기를 만들 수 있는지, 상/하 배치가 가능한지를 통해 구분

block태그를 사용한 핑크색 박스에 border를 주고, F12로 content/padding/border/margin을 확인했다. 좀 더 이해가 가는 느낌!

2. 마진 병합 현상

.box1 { margin-bottom: 250px; }
.box2 { margin-top: 100px; }

형제간의 마진 병합
공간의 공통된 영역을 두 박스가 공유할 경우, 350px이 되는 것이 아니라 두 마진 값 중 큰 값인 250px이 두 박스의 margin이 된다.

부모 자식 간의 마진 병합

<main role="main">
<article></article>
</main>

article{
width:200px;
height:200px;
margin-top:300px;}

위 코드의 경우 article에만 margin-top:300이 적용될 것 같지만, 부모태그인 main에도 margin-top:300이 적용된다.
<실습 추가>
위의 block element의 margin-bottom에 200을 주고 F12로 확인
위의 margin-bottom에 200을 주고 F12로 확인

아래의 block element의 margin-top에 100을 주고 F12로 확인

두 블록 사이에 300px의 margin이 있는 게 아니라 200px의 마진이 있는 것을 확인했다!

3. display,float,clear

1.display
Block과 Inline 요소의 성격을 바꿀 때 사용한다. inline-block을 사용하면 두 요소의 성격을 모두 가질 수 있다.
2.float
요소를 왼쪽/오른쪽으로 정렬시키고 싶을 때 사용. 이름 그대로 선택자를 띄워서 새로운 레이어 층을 만드는 것. 레이어가 겹쳐지지 않는 상태로 왼쪽부터 정렬시키고 싶을 경우 float:left;를 태그나 id,클래스에 연속으로 적용하면 됨

기본 화면

기본 화면(display:block,float 없음)

one block에만 float:right 줌

one,two block에 모두 float:right 줌
id="one"
id="two" 로 작성되어 있는 상태이니 html코드 순서대로 적용됨을 알 수 있다.

one block에 float:left, two block에 float:right

1,2번 박스보다 큰 박스 생성
1,2번 박스보다 큰 박스를 생성하고 float을 주지는 않았더니 표시된 화면.
3번 박스를 F12로 확인
F12로 확인하니 1,2번 박스 밑에 3번박스가 border를 포함해 520X520의 크기를 가지고 있는 것이 보였다. 3번 박스는 0번 레이어, 1/2번 박스는 1번 레이어에 있다고 이해했다.
1번 박스를 F12로 확인
1번박스와 겹쳐져 있는 크기가 border 포함 320 320임을 확인함
3번박스를 float:right로 설정
3번 박스를 float:right로 설정했다. 가장 오른쪽으로 이동한 것이 보인다.

3번박스를 float:left로 설정하니 2번 박스 옆으로 이동했다.

1,3번에 flaot을 right, 2번은 left로 했다. 1번과 3번 박스가 바로 붙어있는 모양이다.

3.clear

float을 사용해 레이어 사이에 공간이 생겨 float 아래로 요소가 겹쳐들어가지 않도록 하기 위해 사용. float 태그와 함께 사용한다.

+)html,body태그는 margin과 padding값을 가지므로 초기화를 해줘야 함.

로 모든 태그를 한번에 선택해 수정할 수도 있음

1,2번에 float을 모두 left로 하고 3번 박스에 clear를 적용한 모양. 아까와 달리 1,2번 박스가 3번 박스를 가리지 않는다.
실습하니까 이제 좀 이해가 간다!

4. 쇼핑몰 만들기에서 배운 것

1. text-decoration:none a태그 사용시에 밑줄 생기고 색 변경되는 것 해제.
2. list-style:none 동그라미나 숫자 표시 없는 리스트.
3. width/height:100% 부모태그의 너비/높이의 100%. .container의 width가 500px인 경우, 자식태그인 intro의 100%는 500px, intro를 내비게이션 바로 사용하고 싶을 경우에는 intro의 width를 50%로 주면 된다.
4. 공간의 크기보다 box의 크기가 클 경우 아래로 내려갈 수도 있다.
5. li태그에 width를 주고 flaot으로 정렬해 메뉴버튼을 만들 수 있다.

뿌링클 치즈맛

이전 포스트

TIL 20230515(HTML,id,class,웹서버와 클라이언트간단하게)

다음 포스트