HTML/CSS 개념 다지기 - 기초 개념, 레이아웃 관련

요들레이후·2023년 3월 5일
elicehtmlcss
0

HTML/CSS

목록 보기
1/2
post-thumbnail

본 내용은 엘리스 SW 4기에서 학습한 내용을 정리한 것입니다.

1. 웹을 구성하는 요소

웹사이트 제작시 고려사항

  1. 웹 표준
    웹 사이트를 작성할 때 따라야 하는 공식 표준이나 기술 규격
  2. 웹 접근성
    장애의 여부와 상관 없이 모두가 웹사이트를 이용할 수 있게 하는 방식
  3. 크로스 브라우징
    모든 브라우저 또는 기기에서 사이트가 제대로 작동하도록 하는 기법

2. HTML 주요 태그 살펴보기

  • <!DOCTYPE html> : HTML5라는 신조어로 문서를 선언하는 태그
  • <html>…</html> : HTML 문서의 시작과 끝을 의미, 모든 HTML태그들은 <html>태그 안쪽에 입력
  • <head>…</head> : 웹사이트의 간단한 요약 정보를 담는 영역, 웹사이트에서 노출되지 않는 정보
  • <body>…</body> : 웹사이트에서 눈에 보이는 정보를 담는 영역, 이미지나 텍스트처럼 출력되는 정보
  • <meta charset=”UTF-8”> : character setting의 약자를 나타내는 문자 코드, 모든 문자를 웹 브라우저에서 깨짐 없이 표시하겠다는 의미
  • <title>…</title> : 웹사이트 탭에 나타나는 제목을 적는 태그
  • <img src=”logo.png” alt=”이미지 업로드 전 텍스트”>
    • 정보성을 갖고 있는 이미지 삽입, 닫힌 태그 없음
    • src속성 : 삽입할 이미지 파일 경로
    • alt속성(반드시 입력) : 웹사이트가 이미지 출력하지 못했을 경우, 텍스트 정보로 대체
      • 웹 표준, 웹 접근성 고려해서 작성해야 하는 것임 → 간혹 가다 이미지 자리에 이미지가 없을 경우, 어떠한 이미지가 있었는지 알려줌.
      • ex) 스크린 리더 프로그램→ html언어만 읽어옴 → 이미지를 만났을 때, 어떠한 이미지일때 시각장애인한테 알려줘야함 → 그것이 바로 alt값임
  • <h> : Heading의 약자로 제목이나 부제목 표현
    • 숫자는 정보의 중요도 나타냄 → 서비스 이름같은 것들은 h1, 가장 중요
  • <p> : 본문 내용
  • <ul><li></li><li></li><li></li>… </ul> : 순서가 없는 리스트, 메뉴 버튼 만들 때 사용
  • <ol><li></li><li></li><li></li>… </ol> : 순서가 있는 리스트
  • <a> : 링크 태그, href속성으로 url부여, target 속성으로 웹페이지를 연결하는 방식 부여


3. 구조를 잡을 때 사용하는 태그-시멘틱태그

  • <header> : 웹사이트의 머리글을 담는 공간
  • <nav> : 메뉴 버튼을 담는 공간(navigation)
    • ul, li, a와 함께 사용
  • <aside> : 좌측과 우측 사이드 위치의 공간, 본문 외의 부수적 내용을 주로 표현
  • <section> : 주제, 카테고리 별로 섹션을 구분하는 용도의 태그로 주로 사용, 그룹화
  • <main>,<article> : 주요 내용을 담는 main태그 안에 article 태그 넣음
    <main role="main"> <!-- 본문 영역 -->
    <article> <!-- 정보 영역 -->
        <h#></#h>
        ...
    </article>
</main>
    • main 속성에 role=”main” → internet explorer 지원X
    • article은 주요 이미지나 텍스트 등의 정보를 담고 구역을 설정하는 태그
    • section과 마찬가지로 특정한 영역을 그룹화할 때 사용하는데, section과는 다르게 해당 페이지에서 다른 페이니자 다른 영역에 독립적으로 갖다 붙힐 수 있는 영역을 그룹화한다.
    • article 속성 내에 태그 내에 구역을 대표하는 타이틀<h#>가 존재해야 함
  • <footer> : 하단에 들어가는 정보 표기할 때 사용
  • <div> : 임의의 공간 만들 때 사용

시멘틱 태그 왜 사용?

1. SEO 최적화
검색 엔진이 태그의 목적에 부합하게 설계되어 있는 구조의 사이트에서 더욱 빨리 효율적으로 정보를 파악, 검색 결과의 노출에 유리할 수 있게 해줌

2. 웹 접근성에 효율적
일반적인 브라우저에서는 차이가 없지만 스크린리더과 같은 환경에서는 웹 접근성과 사용성을 향상시켜준다.

3. 유지보수의 용이성
많은 div사용으로 관리가 어려워지는 문제점에서 벗어나 태그의 이름만 보고도 어떤 영역인지 바로 확인가능, 해당 태그 영역의 특성에 맞는 직업을 구분하여 진행하기에 용이하다.



4. HTML 두 가지 성격

Block요소와 inline 요소

  • 두 요소를 구분 짓는 세가지 주요 특성: 줄바꿈 현상, 가로/세로, 상/하 배치
  • Block 요소: y축 정렬 형태 출력, 줄바꿈 현상, 공간 만들 수 있고 상하 배치 작업 가능
    ex) p태그
  • inline 요소: x축 정렬 형태 출력, 한 줄에 출력, 공간 만들 수 없고 상하 배치 작업 불가능
    ex) a 태그


5. CSS 기초

  • Inline Style Sheet
<h1 style="color: red;">1</h1>
  • Internal Style Sheet
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        h1 {
            color: red;
            font-size: 36px;
        }
        p {
            color: blue;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <h1>안녕하세요!</h1>
    <p>반갑습니다.</p>
</body>
</html>
  • External Style Sheet
<head>
	<link rel="stylesheet" href="style.css">
</head>

CSS 선택자

  1. type → 태그
  2. class → 태그 별명 .
  3. id → 태그 이름 #
    1. id는 class보다 상대적으로 더 큰 공간을 의미
    2. id가 class 보다 css 선택자 우선순위가 높음

부모 자식 관계

<header>
	<h1>Header h1</h1>
	<p>Header p</p>
</header>
header { color: red; }
h1 { color: blue; }
p { color: green; }

<header>과 <h1>, <p> : 부모 자식 관계

<h1>과 <p> : 형제 관계

<header>
	<h1>Header h1</h1>
	<p>Header p</p>
</header>
<footer>
	<h1>Footer h1</h1>
	<p>Footer p</p>
</footer>
header { color: red; }
header h1 { color: blue; }
header p { color: green; }

// 직계 자식 선택 시 아래처럼 써도 됨
header > h1 { color: blue; }

원하는 지역에만 css 속성을 적용하기 위해 css 선택자 앞에 부모를 표기

캐스케이딩

  • CSS 우선순위를 결정하는 세 가지 요소
    • 순서, 디테일, 선택자
  • 순서에 의한 캐스케이딩

    • 나중에 적용한 속성 값의 우선순위가 높음

      p { color: red; }
p { color: blue; } ✨
  • 디테일에 의한 캐스케이딩

    • 더 구체적으로 작성된 선택자의 우선순위가 높음

      header p { color: red; } ✨
p { color: blue; }
  • 선택자에 의한 캐스케이딩

    • style > id > class > type 순으로 우선순위가 높음 ✨

      <style>
	#color { color: blue; }
	.color { color: red; }
	h3 { color: green;}
</style>
<h3 style="color: pink">color</h3>

CSS 주요 속성

  • width, height
    • 고정값(px), 가변값(%), 상대 단위(em, rem)
  • font
    • font-family
      • 입력 순대로 우선순위 적용, 여러개 작성, 쉼표로 이어
      • sans-sefit 마지막에 작성하는 디폴트 값
      • monospace 간격이 모두 동일하게
    • font-weight
      • 100~900 사이의 숫자 입력
    • font-style
      • 글자 기울기
  • border
    • border-style
      • 실선: solid, 점선: dotted
    • 주석과 같이 한 줄에 이어씀, 쉼표 작성X 띄어쓰기로 구분
  • background
    • background-repeat
      • x축으로 반복 : repeat-x
      • y축으로 반복 : repeat-y
      • 반복하지 않음 : no-repeat
    • background-position

      • 공간 안에서 내부 요소(ex. 이미지) 좌표 변경시

      • top, bottom, center, left, right

        // background position of an element to the center of the element
background-position: center;

//  background image to be aligned to the top left corner of the element
background-position: left top;

// background image to be 10 pixels from the left and 20 pixels from the top of the element
background-position: 10px 20px;
    • background-image

      • url 속성 안에 이미지 파일 이름.확장자

        background-image: url("이미지 url")


6. 박스 모델

  • margin, padding에 관한 내용
  • top, right, bottom, left 순서로 한 줄에 작성 가능



7. Block 요소와 Inline 요소

Block 요소

p {
    width: 200px;
    height: 200px;
    margin-top: 100px;
}
  • <p> 태그가 대표적
  • y축 정렬, 줄바꿈 현상이 나타남
  • width/height 값 사용 가능(공간 만들기 가능)
  • margin 과 padding 값 사용 가능(상하 배치 작업 가능)

Inline 요소

  • <a>, <span> 태그
  • x출 정렬, 줄 바꿈 현상 없음
  • width/height 값 적용 불가
    width와 heigh값 지정해도 무시된다. 해당 태그가 마크업하고 있는 컨텐츠의 크기만큼만 공간을 차지하도록 되어 있다.
  • margin-top/bottom, padding-top/bottom 값 적용 불가(상하 배치 작업 불가)
  • left/right 마진, 패딩은 적용 가능



8. 마진 병합 현상

마진 병합 현상이 일어나는 조건

  1. 인접해있는 Block요소 사이에서
    -> inline요소 사이에서는 마진 병합이 발생X

  2. 상하단의 병합
    -> 좌우로는 마진 병합X

형제지간의 마진 병합

  • margin-bottom 과 bottom-top중 숫자가 큰 값으로 적용
<div class="box1">Hello World</div>
<div class="box2">Hello World</div>
.box1 { margin-bottom: 150px; } /* 적용값 */
.box2 { bottom-top: 100px; }

부모 자식간의 마진 병합

  • 자식 뿐만 아니라 부모에도 영향을 미침
  • 자식에게 마진을 넣었는데, 부모와 함께 마진이 적용되는 것
<main role="main">
    <article>
    </article>
</main>
article {
    width: 200px;
    height: 200px;
    margin-top: 100px;
}
  • 자식인 article뿐만 아니라 부모인 main에도 영향을 미침

마진 병합 완화

  1. 자식에게만 마진을 주고 싶을 때, 자식의 position에 absolute를 적용
article {
		position: absolute;
    width: 200px;
    height: 200px;
    margin-top: 100px;
}
  1. 자식을 inline-block요소로 바꿔줌
<style>
  .parent {
   width: 140px;
   margin: 0 auto;
   background-color:pink;
}

.child {
  width: 100px;
  height: 100px;
  margin: 20px;
  background-color: rosybrown;
  display:inline-block ✨
}
</style>

...
<div class="parent">
    <div class="child"></div>
   <div class="child"></div>
</div>
  1. parent에 overflow: hidden값을 준다.
.parent {
 width: 140px;
 margin: 0 auto;
 background-color:pink;
 overflow:hidden;
}

.child {
  width: 100px;
  height: 100px;
  margin: 20px;
	background-color: rosybrown;
}



9. 레이아웃에 영향을 미치는 속성

display

  • Block과 Inline 요소의 성격을 바꿀 때 사용
    • 원래 태그가 가지고 있는 성격을 바꿀 때 사용
    • block인 p태그를 inline으로 바꿈
    • inline인 a태그를 block으로 바꿈
  • inline-block을 사용하면 두 요소의 성격을 모두 가짐
    • x축 정렬이면서 공간에 대한 크기를 만들고, 상하배치작업까지 진행할 때 사용
    • inline-block은 내비게이션 버튼을 만들 때 주로 사용됨
p { display: inline; }
a { display: block; }
a {display: inline-block; }
  • 예제
<style>
    p {
      display: inline;
      width: 100px;
      height: 100px;
      background-color: yellowgreen;
    }
    a {
      display: inline-block;
      width: 100px;
      height: 100px;
      background-color: skyblue;
      margin-top: 100px;
    }
  </style>

<body>
  <p>p 태그(block요소) 1</p>
  <p>p 태그(block요소) 2</p>
  <p>p 태그(block요소) 3</p>
  <a>a 태그(inline요소) 1</a>
  <a>a 태그(inline요소) 2</a>
  <a>a 태그(inline요소) 3</a>
</body>

  • margin-top은 a태그에만 넣어줬는데, p태그도 같이 딸려옴 ⇒ 나란히 정렬되어 있는 a태그의 영향을 받아서 같이 margin-top적용된 것임 ⇒ 형제 지간 마진 병합

float

  • 선택된 요소를 왼쪽 끝 혹은 오른쪽 끝에 정렬시키고자 할 때 사용
  • 기준점은 부모의 크기를 기준으로 부모의 크기의 왼쪽 끝, 오른쪽 끝
    • float을 감싸는 부모가, float을 적용하는 object의 크기들보다 같거나 커야한다.
  • 이름 그대로 선택자를 띄워 새로운 레이어층을 만드는 것
<style>
  .parent {
    width: 250px;
  }
  .left {
    background-color: aqua;
    float: left;
  }
  .right {
    background-color: blueviolet;
    float: right;
  }
</style>

<body>
  <div class="parent">
    <div class="left">Hello World</div>
    <div class="right">Hello World</div>
  </div>
</body>

clear

float을 사용할 때 항상 같이 따라오는 속성임. float는 공중에 떠있다고 생각하면 됨. 다음에 나오는 object를 넣을 때, 레이어층이 겹치는 형태로(float아래에 있는 것처럼) 출력이 됨. 그래서 float의 object들 아래 지점에 잘 출력하기 위해서 사용하게 됨

  • float에 대한 속성을 제어하고자 할 때 사용
  • float을 마지막으로 사용한 지점의 다음에 나오는 태그에 clear를 넣어주면 됨.
<style>
  html {
    margin: 0;
    padding: 0;
  }
  body {
    margin: 0;
    padding: 0;
  }
  header {
    width: 100%;
    height: 50px;
    background-color: yellow;
  }

  #left {
    float: left;
    width: 50px;
    height: 50px;
    background-color: red;
  }

  main {
    float: left;
    width: 200px;
    height: 50px;
    background-color: green;
  }

  #right {
    float: right;
    width: 50px;
    height: 50px;
    background-color: pink;
  }

  footer {
    clear: both;  ✨
    width: 100%;
    height: 50px;
    background-color: black;
  }
</style>

<body>
  <header></header>
  <article id="left"></article>
  <main role="main"></main>
  <article id="right"></article>
  <footer></footer>
</body>
  • 위 코드에서는 마지막으로 float을 사용한 태그가 aside, 그래서footer에 clear 속성을 넣어줌
  • 만약 float:left만 사용되었다면, clear:left

브라우저와 공간 사이의 공백 제거

<style>
    html, body {
        margin: 0;
        padding: 0;
    }
</style>
  • html과 body태그는 디폴트로 margin과 padding 값을 가지므로 초기화를 해주어야 함
<style>
    * {
        margin: 0;
        padding: 0;
    }
</style>
  • 혹은 *로 모든 html 태그 선택 가능


🧐추가적인 CSS 속성들

vertical-align

  • baseline, bottom : 아랫줄에 기준 맞춤
  • top : 윗 줄에 기준 맞춤
  • middle : 가운데에 기준 맞춤
profile
요들레이후
성공 = 무한도전 + 무한실패
다음 포스트

HTML/CSS 개념 다지기 - 애니메이션, 미디어쿼리

0개의 댓글