codingBird

6주차 개념노트 본문

개념노트

6주차 개념노트

김뚜루 2022. 9. 25. 12:43

# HTML

HTML은 프로그래밍 언어는 아니고, 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어이다. HTML은 elements로 구성되어 있으며, 이들은 적절한 방법으로 나타내고 실행하기 위해 각 콘텐츠의 여러 부분들을 감싸고 마크업 한다. 

# DOCTYPE 

"문서 형식 선언" 또는 DOCTYPE이란 어떤 SGML이나 XML(SGML계열) 기반 문서 내에 그 문서가 특정 문서 형식 정의(DTD)를 따름을 지정하는 것.  <!DOCTYPE > 태그로 페이지에서 사용하는 HTML버전을 브라우저에게 알려줄 수 있고 이는 HTML 버전에 따라 해석되는 방식이 브라우저마다 다르기 때문에 지정해주는 것이 중요했으나, 요즘은 거의 신경 쓰지 않으며, 모든 것이 제대로 작동하기 위해 포함되어야 하는 역사적 유물이다. -> HTML5은 SGML과 호환되지 않기 때문에, HTML5로 구성된 문서에서 문서 형식 선언은 불필요하다 다만 표준 모드 활성화를 위해 최소한의 형태로 유지하는 것.

# DTD 

DTD나 XML 스키마는 다양한 문서간의 표준을 제시하기 위해 쓰인다 

  • 같은 뜻을 포함하지만 태그 명칭이 다를 수 있다
  • 같은 태그의 명칭을 사용하자지만 다른 뜻을 나타낼 수 있다
  • 태그가 있는지 확실하지 않다 
  • 태그의 순서성, 사용 규격이 확실하지 않다
  • 태그 내 데이터 값에 대한 기준이 정해져 있지 않다. 

# HTML head

<head>는 <body> 요소와 다르게 내용이 페이지에 표시되지 않는다. 대신 head 내용이 하는 일은 페이지에 대한 메타데이터를 포함하는 것이다.

# HTML tags

https://ddurubird.tistory.com/98

 

HTML - 태그 정리

주요 범위 : HTML 문서 범위를 설정.   lang : 문서의 언어 -> ko, en, fr...  : HTML 문서의 정보를 설정. , 등  : HTML 문서의 구조를 설정. body { display : block; } 메타데이터 : 브라우저의 제목 표시..

ddurubird.tistory.com

# meta tag

<meta> 요소는 <base>, <link>, <script>, <style>, <title>과 같은 다른 메타 관련 요소로 나타낼 수 없는 메타데이터를 나타낸다. 

  • name 특성을 지정하면 전체 페이지에 적용되는 메타데이터를 제공한다
  • content http-equiv 또는 name의 특성의 값을 담는다
  • charset 특성을 지정하면 문서 인코딩에 사용한 문자 인코딩을 나타내는 "문자 집한 선언" DOCTYPE이 된다 
  • itemprop 특성을 지정하면 사용자 정의 메타데이터를 지정 한다. 

# 블럭 레벨 요소 vs 인라인 요소 

블록 레벨 요소 :

  • 블록 레벨 요소는 웹페이지 상에 블록을 만드는 요소. 블록 레벨 요소는 앞뒤 요소 사이에 새로운 줄을 만들고 나타난다. 
  • 일반적으로 페이지의 구조적 요소를 나타낼 때 사용된다 예를 들면 단락 <p>, 목록 <li>, 내비게이션 메뉴 <nav>, 꼬리말 <footer> 등
  • 블록 레벨 요소는 인라인 요소에 중첩될 수 없다 그러나 블록 레벨 요소는 다른 블록 레벨 요소에 중첩될 수 있다 

인라인 요소 :

  • 인라인 요소는 항상 블록 레벨 요소 내에 포함되어 있다.
  • 인라인 요소는 문서의 단락같은 큰 범위에는 적용될 수 없고, 문장, 단어 같은 작은 부분에 대해 적용될 수 있다 
  • 새로운 줄을 만들지 않는다. <span> <a> <em> <strong> 등이 있다.

# Hypertext

Hypertext는 참조(하이퍼링크: 하이퍼텍스트 문서 안에 직접 모든 형식의 자료를 연결하고 가리킬 수 있는 참조 고리)를 통해 독자가 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트. 하이퍼텍스트는 링크에 따라 그 차례가 바뀌는 임의적이면서 나열형 구조를 가지고 검색엔진과 더불어 정보 습득의 새로운 장을 가져다주었다.  

# 유니코드와 UTF-8

유니코드 :

유니코드는 문자 인코딩 표준. 텍스트 문자 (숫자, 문자, 문장 부호)와 이진 코드의 대응표. -> 컴퓨터는 0과 1만 이해해서 각각 고유 번호를 각 기호에 지정해야 한다. 기존 인코딩들은 규모나 범위 면에서 한정되어 있고 다국어 환경에서는 서로 호환되지 않아 유니코드의 목적은 현존하는 문자 인코딩 방법을 모두 유니코드로 교체하려는 것이다. 

 

UTF-8 :

UTF-8은 유니코드를 위한 가변 길이 문자 인코딩 방식 중 하나이다. UTF-8 인코딩은 유니코드 한 문자를 나타내기 위해 1바이트에서 4바이트까지 사용한다. 아래와 같은 성질을 가지는데 이유는 한 문자에 대한 바이트 표현이 다른 문자에 대한 바이트 표현의 일부가 되는 경우가 없도록 하기 위함.

  • 1바이트로 표시된 문자의 최상위 비트는 항상 0이다. 
  • 2바이트 이상 표시된 문자의 경우, 첫 바이트의 상위 비트들이 그 문자를 표시하는데 필요한 바이트 수를 결정. 2바이트 110, 3바이트 1110으로 시작 
  • 첫 바이트가 아닌 나머지 바이트들은 상위 2비트가 항상 10이다 

# Modified UTF-8

자바 String에서 사용하는 인코딩은 UTF-16BE이다. 문자열 전송/수신을 위해서 직렬화가 필요할 때에는 변형된 UTF-8을 사용한다. (DataInput, DataOutput 인터페이스 구현체에서 문자열을 기록하거나 읽어 들일 때 변형된 UTF-8을 사용)

변형된 UTF-8에서 U+0000을 2바이트로 표시하는 이유는 인코딩된 결과에 널 문자(00)가 나타나지 않도록 하기 위해서다. 

# 마크업 언어(markup, markup language)

마크업 언어는 태그 등을 이용해서 문서나 데이터의 구조를 명기하는 언어의 한 가지이다 -> 제어 흐름을 하는 분기문이 없음으로 튜링 완전하지 않음. 태그는 원래 텍스트와는 별도로 원고의 교정 부호와 주석을 표현하기 위한 것이었으나 용도가 점차 확장되어 문서의 구조를 표현하는 역할을 하게 되었다. 일반적으로 데이터를 기술하는 정도로만 사용되기에 프로그래밍 언어와는 구별된다.  

# 의미있는 마크업 (Sementic markup)

시멘틱은 코드 조각의 의미를 나타낸다. - 예를 들어 "이게 어떻게 시각적으로 보일까?" 보다 이 코드 라인을 실행하는 것은 어떤 효과가 있는가? 혹은 "이 HTML 엘리먼트가 가진 목적이나 역할은 무엇인가?" 예를 들면 <h1>은 "이 페이지에서 최상위 제목"이라는 의미를 가진 시멘틱 요소이다. 모든 요소가 이와 같이 보이게 할 수 있으나 의미적 가치가 없음으로 이점이 없다. 

 

HTML의 관심사는 채워질 데이터를 나타내는 것. 어떻게 보여야만 하는가는 CSS의 관심사이다.

의미론적인 마크업을 사용하면 아래와 같은 이점이 있다.  

  • 검색 엔진은 시멘틱 마크업을 페이지의 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주한다. 
  • 시각 장애가 있는 사용자가 스크린리더로 페이지를 탐색할 때 시멘틱 마크업을 푯말로 사용할 수 있다
  • 논 시멘틱 한 div을 탐색하는 것보다, 의미 있는 코드 블록을 찾는 것이 훨씬 쉽다.
  • 개발자에게 태그 안에 채워질 데이터 유형을 제안한다.
  • 의미 있는 네이밍은 적절한 사용자 정의 요소 / 구성요소의 네이밍을 반영한다

# 웹 접근성 

접근성은 가능한 많은 사람이 웹 사이트를 사용할 수 있도록 하는 방법으로, 통상적으로 장애인만을 대상으로 한다고 생각하지만 실제로는 모바일 장치를 사용하는 사람이나 느린 네트워크 연결을 사용하는 사람들도 포함하고 있다. 

 

접근성 및 이에 따른 모범 사례는 다음과 같은 모든 사람들에게 도움이 될 수 있다. 

  • 시멘틱 한 HTML은 SEO를 향상해, 사이트를 찾기 쉽고 시장성이 있도록 해준다. 
  • 접근성에 대해 고려하는 것은 좋은 윤리적인 도덕관념을 보여주고 대중적인 이미지를 개선시킨다.
  • 접근성을 향상시키는 좋은 방법은 휴대폰 사용자, 낮은 네트워크 속도의 사용자 등 다른 여러 사용자가 사용하기 쉽게 만든다
  • 몇 국가에서는 법의 적용을 받는다. 

# Cross browsing 

웹페이지의 상호 호환성을 의미한다. 다른 브라우저를 이용하더라도 정보를 획득하는 것에 불이익이 없도록 하는 것. 

모든 브라우저에서 똑같이 보이도록 만드는 것이 아닌 동등한 내용을 보여주게 하는 것.  

다른 브라우저나 버전에서 작동하지 않는 기능이나 태그를 사용하게 되면 제대로 동작을 하지 않아 정보를 제공할 수 없게 된다. 따라서 제품을 설계할 때 어디까지 크로스 브라우징을 지원할 것인지 정해야 한다.

 

- Can I Use...  크로스 브라우징 체크할 때 확인하고자하는 기능을 검색란에 입력해주면 크로스 브라우징 체크가 가능하다.

# SEO

SEO(검색 엔진 최적화)는 웹사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정이다.

검색 엔진은 웹을 크롤링하면서 페이지에서 페이지로 링크를 따라가고, 찾은 콘텐츠의 색인을 생성한다. 검색 결과에 보이는 것이 바로 콘텐츠의 색인이다. 크롤러는 일정 규칙을 따르므로, SEO를 진행하며 해당 규칙을 밀접하게 따라가면 웹사이트의 검색 결과가 보다 높은 곳에 노출돼 비용 없는 마케팅 수단이자 수익으로 연결될 수 있다.

  • 시멘틱 HTML을 사용
  • 방문자 층에 맞는 언어로 콘텐츠를 작성, 이미지와 더불어 텍스트를 사용해 크롤러가 내용을 이해할 수 있도록 한다 
  • 다른 유명한 사이트에서 해당 사이트로 링크를 했다면 더 많은 트래픽을 받는다

# 크롤링

웹 크롤러는 조직적, 자동화된 방법으로 www을 탐색하는 컴퓨터 프로그램이다. (http request인 스크래퍼랑은 다름)

웹 크롤러가 하는 작업을 웹 크롤링 혹은 스파이더링이라 부른다. 검색 엔진과 같은 여러 사이트에서는 데이터의 최신 상태 유지를 위해 웹 크롤링을 해서 섹인 목록을 저장한다. -> frontier가 먼저 탐색할 URL을 Fetchder에게 넘겨주면 Fetcher는 html 내용을 Parser에게 넘겨주고 Parser에서는 다른 하이퍼링크(<a>, <url>)를 찾는다. 여기서 찾은 URL을 다시 또 Fetcher가 방문하게 되면 무한 loop가 되니 이미 방문한 URL이나 중복 URL은 제거하고 Frontier에게 전달한다. -> content seen 이미 본 내용인지 판단하는 부분.  

# Box model 

https://poiemaweb.com/css3-box-model

HTML 요소는 Box 형태의 영역을 가지고 있다. 이는 콘텐츠, 패딩, 보더, 마진으로 구성된다. 

브라우저는 박스 모델의 크기와 프로퍼티(색, 배경, 모양 등) 위치를 근거로 하여 렌더링을 실행한다. 

Box 모델을 쿠성하는 콘텐츠, 패딩, 보더, 마진에 대한 설명은 아래와 같다. 

https://poiemaweb.com/css3-box-model

# 표준 CSS 박스 모델, 대체 CSS 박스 모델

https://poiemaweb.com/css3-box-model
https://poiemaweb.com/css3-box-model

표준 CSS 박스 모델은 content 영역의 요소를 기준으로 한다 따라서 요소의 실제 크기는 border + padding + content + padding + border이 되어 실제 정하고자 하는 크기와 다르게 보일 수 있다. 

 

box-sizing : border-boxc프로퍼티를 이용하면 대체 CSS box model로 지정할 수 있는데 border-box로 지정하면 마진을 제외한 박스 모델 전체를 width, heigth 프로퍼티의 대상 영역으로 지정할 수 있어서 CSS Layout을 직관적으로 사용할 수 있게 한다. 

# 인라인 박스 (<span>,<a>,<img>) 

인라인 요소는 부모 요소의 컨텡니닝 박스에 수평으로 연이어 배치되며 부모 요소의 크기를 넘어갈 경우 자동으로 줄이 바뀌어 라인을 형성한다. 

  • width, height, overflow : 적용되지 않는다. 너비와 높이가 그 안의 내용에 맞춰 자동으로 줄어들기 때문
  • margin, line-heigth : 마진 속성의 마진들은 작동하고, margin-top, margin-botton은 적용되지 않는다. 위아래 간격을 위해 line-heigth을 사용해야 한다. 
  • border, padding : 상단과 하단 테두리를 지정하면, 패딩 영역 위와 아래에 테두리가 표시된다. 
  • 블록 요소를 인라인 요소로 렌더링되게 하려면 display : inline 

# 인라인 블록 박스 

인라인 블록 박스는 인라인 흐름에 따르되 블록 박스처럼 마진, 테두리, 패딩, 너비, 높이 속성이 적용된다. 줄이 서로 겹치지 않고 자동 축소, 지정 크기, 자동 확대가 가능하다. 

  • 인라인 요소에 display: inline-block을 지정하면 원하는 width와 height를 설정할 수 있으며 자동 축소되게 하려면 width : auto와 height : auto를 지정하면 된다. 부모 요소에 맞춰 자동 확대되게 하려면 width : 100%

# em, rem, vw, vh (상대 단위)

https://dinfree.com/lecture/frontend/122_css_3.html

부모요소의 크기를 기준으로 상대적인 크기를 지정하는 단위. 상대 단위를 잘 활용하면 반응형 웹 등 다양한 화면 크기에 대응할 수 있는 웹페이지 레이아웃 구현이 가능하다. 가장 많이 사용되는 단위는 %, rem, em이다.

  • em : 부모요소의 기본 크기를 1em으로 상대적인 크기를 지정
  • rem : rem에서 r은 root를 뜻하며 부모가 아닌 최상위 root를 기준으로 정해지기 때문에 중간에 기본값이 변경되지 않음. 
  • v : 앞에 v가 붙은 단위들은 viewport와 관련된 것으로 pc의 경우 브라우저 크기를 줄이면 콘텐츠가 줄어들고, 모바일 기기들의 경우 브라우저 크기를 조정할 수 없으므로 콘텐츠가 브라우저 크기를 벗어나는 경우 한화면에 담기 위해 크기를 줄이게 된다. 

# CSS selector 

https://poiemaweb.com/css3-selector

CSS는 HTMl 요소의 style을 정의한다. 그리하려면 HTML이 존재해야 하고 style을 적용하고자하는 HTML 요소를 특정할 필요가 있다. 이러한 목적으로 사용되는 것이 셀렉터이다. 즉, style을 적용하고자하는 HTML 요소를 셀렉터로 특정하고 선택된 요소에 스타일을 정의하는 것. 

  • h1, p { color: red;} 복수의 셀렉터를 쉼표(,)로 구분해서 선택할 수 있다. 
  • * { color: red; } HTML 문서 내의 모든 요소를 선택한다.
  • p { color: red; } 지정된 태그명을 가지는 요소를 선택한다.
  • #id { color: red; } id 어트리뷰트 값을 지정하여 일치하는 요소를 선택한다. id 어트리뷰트는 중복될 수 없는 유일한 값이다. 
  • .class { color: red; } class 어트리뷰트 값을 지정하여 일차하는 요소를 선택한다. class 어트리뷰트 값은 중복될 수 있다.
  • a[href] { color: red;} 셀렉터[어트리뷰트] 지정된 어트리뷰트를 갖는 모든 요소를 선택한다.
  • a[href="_blank"] {color: red; } 지정된 어트리뷰트를 가지며 지정된 값과 어트리뷰트 값이 일치하는 모든 요소를 선택한다. 
  • div p { color: red; } 후손 셀렉터는 셀렉터 A의 모든 후손 요소 중 셀렉터 B와 일치하는 요소를 선택한다.
  • div > p { color: red; } 자식 셀렉터는 셀럭터 A의 모든 자식 요소 중 셀렉터 B와 일치하는 요소를 선택한다.
  • p ~ ul { color: red; } 일반 형제 셀렉터는 셀렉터 A의 형제 요소 중에 p요소 뒤에 위치하는 ul 요소를 모두 선택한다.
  • p + ul { color: red; } 인접 형제 셀렉터는 셀렉터 A의 형제 요소 중에 셀렉터 A 바로 뒤에 위치하는 셀럭터 B 요소를 선택한다
  • a:hover { color: red; } Pseudo-class Selctor는 요소의 특정 상태애 따라 스타일을 정의할 때 사용된다. 
  • :link, :visited, :hover, :active, :focus, :check, :enabled, :disabled 상태
  • :first-child, :last-child 구조
  • :not 셀렉터에 해당하지 않는 모든 요소를 선택한다
  • p::first-letter { color: red; } 가상 요소는 요소의 특정 부분에 스타일을 적용하기 위해 사용된다 
  • ::first-letter, ::first-line, ::after, ::before, ::selection

# float

float 프로퍼티는 주로 레이아웃을 구성할 때 블록 레벨 요소를 가로 정렬하기 위해 사용되는 중요한 기법이다. flexbox 레이아웃을 지원하지 않는 IE를 고려해야 한다면 float 프로퍼티를 사용해야 한다. (참고로 IE는 서비스 지원이 끝났다)

https://poiemaweb.com/css3-float

  • 정렬: float 프로퍼티를 사용하지 않는 블록 요소는 수직으로 정렬된다. float: left; 프로퍼티를 사용하면 왼쪽부터 가로 정렬되고, float: right; 프로퍼티를 사용하면 오른쪽부터 가로 정렬된다. 
  • width: width 프로퍼티의 기본값은 100%이므로 width를 지정하지 않는 block요소는 부모 요소의 가로폭을 가득 채운다. 

# Flexbox 

https://poiemaweb.com/css3-flexbox

Flexbox 레이아웃은 flex item이라 불리는 복수의 자식 요소와 이들을 내포하는 flex-container 부모 요소로 구성된다. 

https://poiemaweb.com/css3-flexbox

flexbox를 사용하기 위해서 HTML 부모 요소의 display 속성에 flex를 지정한다. -> 부모 요소가 inline인 경우 inline-flex를 지정한다.

flex 또는 inline-flex는 부모 요소에 반드시 지정해야하는 유일한 속성이며 자식 요소는 자동적으로 flex item이 된다. 

 

flex-direction :

https://poiemaweb.com/css3-flexbox

  • flex-direction: row; 좌에서 우로 수평 배치된다. flex-direction 속성의 기본값. 
  • flex-direction: row-reverse; 우에서 좌로 수평 배치된다.

https://poiemaweb.com/css3-flexbox

  • flex-direction: column; 위에서 아래로 수직 배치된다. 
  • flex-direction: column-reverse; 아래에서 위로 수직 배치된다.

flex-wrap :

https://poiemaweb.com/css3-flexbox

flex-wrap 속성은 flex 컨테이너의 복수 flex item을 1행으로 또는 복수로 배치한다. flex-wrap 속성은 flex 컨테이너 width보다 flex item들의 width의 합계가 더 큰 경우, 한 줄로 표한할 것인지, 여러줄로 표현할 것인지를 지정한다. 

  • flex-wrap: nowrap; flex item을 개행하지 않고 1행에 배치한다. flex-wrap 속성의 기본값. 각 item 폭은 flex container에 들어갈 수 있는 크기로 축소된다. 
  • overflow: auto; 를 지정하면 가로 스크롤이 생기며 컨테이너를 넘치지 않는다.

https://poiemaweb.com/css3-flexbox

  • flex-wrap: wrap; flex item들의 width 합계가 flex 컨테이너의 width 보다 큰 경우 flex item을 복수행에 배치한다. 

justify-content :

flex container의 main axis를 기준으로 flex item을 수평 정렬한다. 



 
  • justify-content: flex-start;
  • justify-content: flex-end;
  • justify-content: center;
  • justify-content: space-between; 첫 번째와 마지막 item은 좌우 측면에 정렬되고 나머지는 균등한 가격으로 정렬된다. 
  • justify-content: space-around; 모든 item은 균등한 간격으로 정렬된다.

align-items :

flex item을 flex container의 수직 방향(cross axis)으로 정렬한다. 모든 item에 적용된다. 

  • align-items: strech; 모든 item은 flex container의 높이에 꽉찬 높이를 갖는다. align-items 속성의 기본값. 
  • align-items: flex-start; 모든 items은 flex container의 cross start 기준으로 정렬된다. 
  • align-items: flex-end; 모든 item은 flex container의 coress end 기준으로 정렬된다.
  • align-items: center; 모든 item은 flesx container의 cross axis의 중앙에 정렬된다.
  • align-items: baseline; 모든 item은 flex container의 baseline 기준으로 정렬된다.

align-content :

flex container의 cross axis를 기준으로 item을 수직 정렬한다. 참고로 justify-content 속성은 flex container의 main axis 기준으로 수평 정렬하는 것. 




  • align-content: stretch; 모든 flex item은 flex item의 행 이후에 균등하게 분배된 공간에 정렬되어 배치된다. 기본값
  • align-content: flex-start; felx container의 cross start 기준으로 stack 정렬된다. 
  • align-content: flex-end; flex container의 cross end 기준으로 stack 정렬된다. 
  • align-content: center; flex containerdml cross axis 중앙에 stack 정렬된다. 
  • align-content: space-between; 첫 번째 item 행은 상단에 마지막 item행은 하단에 배치되고 나머지 행은 균등 배치 정렬된다.
  • align-content: space-around; 모든 item은 균등 분할된 공간 내에 배치 정렬된다.

order :

flex item의 배치 순서를 지정한다. HTML 코드를 변경하지 않고 order 속성값을 지정하는 것으로 간단히 재배치할 수 있다. 기본 재치 순서는 flex container에 추가된 순서. 기본 값은 0. 

 

flex-grow :

flex item의 너비에 대한 확대 인자를 지정한다. 기본값은 0이고 음수 값은 무효하다.

# Grid layout

https://studiomeal.com/archives/533

  • 그리드 컨테이너 (Grid Container)
    display: grid를 적용하는, Grid의 전체 영역. Grid 컨테이너 안의 요소들이 Grid 규칙의 영향을 받아 정렬된다고 생각하면 된다.
  • 그리드 아이템 (Grid Item)
    Grid 컨테이너의 자식 요소들입니다. 바로 이 아이템들이 Grid 규칙에 의해 배치된다.
  • 그리드 트랙 (Grid Track)
    Grid의 행(Row) 또는 열(Column)
  • 그리드 셀 (Grid Cell)
    Grid의 한 칸을 가리킨다.
  • 그리드 라인(Grid Line)
    Grid 셀을 구분하는 선.
  • 그리드 번호(Grid Number)
    Grid 라인의 각 번호.
  • 그리드 갭(Grid Gap)
    Grid 셀 사이의 간격.
  • 그리드 영역(Grid Area)
    Grid 라인으로 둘러싸인 사각형 영역으로, 그리드 셀의 집합.

Grid layout 구조는 하느의 container와 다수의 item으로 나타낼 수 있다.

그리드는 기본적으로 블록 요소임으로 아래로 쌓인다. 

 

행과 열 지정 :

간격 설정 :

  • row-gap
  • column-gap
  • gap 

직관적 배치 기능 : 

직관적 배치 기능을 사용하면 아이템들을 더욱 직관적으로 그리드 레이아웃의 행과 열에 배치할 수 있다.

주의할 점은 하나의 아이템은 사각형의 형태로 작성해야 한다는 것. 

우선 그리드 아이템 요소들에게 구별이 가능한 클래스명을 지정한다. 

grid-area 속성을 사용해 각 그리드 아이템에게 이름을 부여한다. 

grid-template-areas 속성을 사용해 아이템을 배치한다. . 으로 공간을 공백으로 설정할 수 있다.

암시적 지정 :

  • grid-auto-rows
  • grid-auto-columns 

grid-template-rows-와 grid-template-columns 통해 명시적으로 그리드 레이아웃의 행과 열을 지정할 수 있다.

grid-auto-rows와 grid-auto-columns는 명시적으로 지정된 영역을 벗어난 아이템의 행과 열을 암시적으로 지정해준다. 

위 코드에서 그리드 레이아웃은 행과 열이 모두 3개씩 존재하기 때문에 9개의 아이템까지 수용할 수 있다. 따라서 아에팀 10은 범위를 벗어나게 되고 암시적 선언을 통해 해당 아이템 높이는 100px가 된다.

각 셀의 영역 지정 : 

https://studiomeal.com/archives/533

왼쪽과 같이 작성을 하면 오른쪽 처럼 나타내게 된다. 

시작번호 / 끝번호를 지정하는 방법 외에, 몇 개의 셀을 차지하게 할 것인지 지정해줄 수도 있다.

 

'개념노트' 카테고리의 다른 글

8주차 개념 노트 - Spring  (1) 2022.10.09
7주차 개념 노트  (0) 2022.10.02
3주차 개념노트  (0) 2022.08.28
2주차 개념 노트  (0) 2022.08.21
1주차 개념노트  (0) 2022.08.14
'개념노트' Related Articles more