24일차 - HTML 마무리(뷰포트, 시맨틱 태그, 미디어 태그), CSS 선택자, 텍스트 관련 속성, 박스 모델, 부동 요소

AI 솔루션 개발자과정(Java, Python) 2022. 11. 10. 17:07

뷰포트(viewport)

뷰표트(viewport)란 현재 화면에 보여지고 있는 영역을 의미한다. 기기 별로 뷰포트가 다르기 때문에, 동일한 웹 페이지라도 기기에 따른 배율 조정이 발생해 화면의 크기가 다르게 보이는 현상이 나타난다.

동일한 HTML 문서를 각각 pc와 모바일로 확인한 결과이다.

태블릿, 스마트폰 등 모바일 기기가 등장하기 전에는 웹 페이지가 컴퓨터 화면 만을 위해 설계 되었다. 컴퓨터 화면에서의 웹 페이지는 웹브라우저라는 소프트웨어를 통해 페이지 크기를 조절해가며 웹을 조회할 수 있지만, 모바일 기기에서는 고정된 사이즈(스크린 크기)로 조회해야 하므로 웹의 모든 콘텐츠를 표시하기 위해서는 배율 조정 을 해야만 한다.

때문에 PC용 웹페이지와 모바일 웹페이지를 따로 만드는 경우도 있다.

기기 별로 뷰포트가 다르기 때문에 발생하는 배율 문제에 대응하기 위해 meta 태그를 통해 뷰포트 관련 설정을 추가할 수 있다.

이 코드는 Visual Studio Code에서 !를 입력하면 생성되는 양식이다.

meta 태그를 보면, 뷰포트의 너비를 단말기 너비에 맞추고, 초기 배율을 1로 맞춘다는 코드이다.

meta 태그는 다음과 같은 형식으로 사용한다. charset을 통해 글자 인코딩을 지정하는 방식보다는

속성명과 속성값을 지정하는 방식이 일반적인 방식이다.

뷰포트 정리.

•뷰포트는 현재 화면에 보여지고 있는 영역을 의미한다.
•웹 문서는 기본적으로 PC 화면에 맞춰 설계 되었기 때문에, 다른 기기에서 배율 조정이 일어난다.
•배율 조정 현상에 대응하기 위해 개발자는 메타 태그를 사용해 뷰포트 관련 설정을 추가할 수 있다.

시맨틱 태그(semantic tag)

시맨틱은 ‘의미론적인’이라는 의미이다. 시맨틱 태그는 개발자와 브라우저에게 의미있는 태그를 제공한다.

=> 시맨틱 태그명은 ‘이 요소가 가진 목적이나 역할은 무엇인가?’를 나타낸다!

=> 검색 엔진에게 좋은 단서가 된다!

시맨틱 태그는 콘텐츠를 감싸는 형태로 사용한다.

대부분의 시맨틱 태그는 컨테이너 태그(span이나 div)와 같이 특별한 스타일을 제공하지 않는다.

그러나 다음과 같은 이점을 가져다 준다.

•검색 엔진은 시맨틱 태그(태그명)를 중요한 단서로 본다.
•시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 때 참조된다.
•코드의 가독성이 좋아진다.
•컨테이너의 남용을 방지할 수 있어 코드 품질이 좋아지고, 개발이 쉬워진다.

시맨틱 태그의 종류

시맨틱 태그 내용정리

•시맨틱 태그는 개발자와 브라우저에게 의미있는 태그를 제공한다.
•검색 엔진은 시맨틱 태그(태그명)를 중요한 단서로 본다.
•컨테이너의 남용을 방지할 수 있어 코드 품질이 좋아지고, 개발이 쉬워진다.
•필수가 아니다. 그러나 사용해서 손해볼 것은 없다!

미디어 태그

이미지 외에 동영상, 오디오, 웹 브라우저 화면 등도 웹문서에 포함시킬 수 있다.

audio

문서에 음향 콘텐츠를 포함할 때 사용한다.

src 속성을 사용해 콘텐츠를 지정하며, 브라우저 별 호환 여부가 상이하다.

video

비디오 플레이어를 문서에 삽입한다.

iframe

현재 문서 안에 다른 HTML 페이지를 삽입한다.

웹 문서에 추가되는 스타일

콘텐츠의 크기
콘텐츠의 색상
콘텐츠의 위치
콘텐츠의 움직임

이러한 스타일을 추가하는 것이 CSS이다.

미디어 태그 내용정리

•audio 태그는 소리 콘텐츠를 표시하며 컨트롤 요소, 반복, 음소거 등을 추가 로 설정할 수 있다.
•video 태그는 영상 콘텐츠를 표시하며 컨트롤 요소, 반복, 음소거 등을 추가 로 설정할 수 있다.
•소리와 영상 콘텐츠는 브라우저마다 처리 방식이 달라 같은 코드라도 결과 가 서로 다를 수 있다.
•iframe 태그는 웹 화면에 다른 웹 문서를 삽입할 수 있다.

웹페이지를 꾸미는 CSS

CSS는 Cascading Style Sheets의 약자이다.

CSS는 HTML 문서에 스타일을 더해준다! HTML 문서는 태그가 태그를 포함하는 계단식 구조를 지니고 있다.

CSS 문서(코드) 자체는 독립적으로 존재할 수 있지만, 그 목적이 구조화된 HTML 문서의 스타일을 정의하는 데 있으므로 HTML 문서가 없는 CSS 문서는 사실상 의미가 없다.

HTML : 웹 문서의 콘텐츠를 구성하는 언어
CSS : 웹 문서의 콘텐츠에 스타일을 추가하는 언어(색상, 크기, 위치 등)

=> HTML과 함께 사용되지 않는 CSS는 단순 텍스트일 뿐이며, 웹브라우저를 통해 결과물을 확인하기 위해서는 반드시 HTML 문서 작성이 선행되어야 합니다

CSS 기본 문법

선택자 : 어떤 요소에 스타일을 적용 할지에 대한 정보

{중괄호} : 선택한 요소에 적용할 스타일을 정의하는 영역

속성명 : 어떤 스타일을 정의하고 싶은지에 대한 정보(색상, 크기 등)

속성값 : 어떻게 정의하고 싶은지에 대한 정보

속성명과 속성값은 여러개 사용 가능하다.

CSS의 주석

자바의 주석 사용법과 동일하다.

CSS의 주석은 이 방법이 유일하다.

HTML 문서에 CSS 문서(코드)를 적용하고자 할 때는 다음과 같은 방식들을 사용할 수 있다.

•인라인 스타일 : 태그에 직접 기술하기
•스타일 태그 : 스타일시트를 위한 태그를 추가하여 기술하기
•문서 간의 연결 : 스타일시트 문서를 따로 작성하여 HTML 문서와 연결하기

인라인 스타일

태그에 style 속성을 추가하여 요소에 직접적으로 스타일을 정의하는 방식. 따라서 선택자는 필요 없다.

웹 콘텐츠와 스타일시트를 분리하기 위해서는 사용하지 않는 편이 좋다.

인라인 스타일의 장점은

빠르고 간편하다.
우선순위가 가장 높다.

인라인 스타일의 단점은

코드 수정 시 불편하다.(모듈화가 안된다.)
가독성이 떨어진다.

스타일 태그

HTML 문서에 스타일 태그를 추가하여 그 안에 CSS 코드를 작성할 수 있다.

스타일 태그의 장점

여러 개의 요소에 전부 스타일을 적용할 수 있다.(단, 인라인 스타일이 적용된 문단에는 적용 불가능.)

문서 간의 연결

확장자가 *.css 인 스타일시트 파일을 생성해 그 안에 CSS 코드를 작성하고, HTML문서에 이를 연결해줄 수 있다. 이때는 <link> 태그를 사용한다.

<link> 태그는 HTML 문서의 <head> 내부에서 사용해야 한다.

•href : 연결하고자 하는 외부 소스의 url을 기술하는 속성
•rel : 현재 문서(HTML)와 외부 소스의 연관 관계를 기술하는 속성

CSS 내용 정리

•CSS는 웹문서를 꾸며주기 위해 사용하는 언어이다.
•CSS 코드는 CSS 파일에 작성한다. 확장자는 *.css 이다.
•CSS 코드는 HTML 문서에 스타일을 추가(정의)하는 언어이다.
=> 따라서 HTML 문서가 존재하지 않을 때는 단순 텍스트에 불과하다.
•CSS 코드는 선택자, 중괄호 영역, 속성명, 속성값 등으로 구성된다.
•CSS 코드에도 주석을 사용할 수 있다. /* 주석 */
•CSS 코드를 HTML 문서에 적용하기 위해서는 인라인 스타일, 스타일 태그, 외부 문서 연결 등의 방식을 사용해야 한다.

선택자

선택자 : 어떤 요소에 스타일을 적용 할 것인지에 대한 정보

선택자의 종류

• 기본 선택자

• 그룹 선택자

• 특성 선택자

• 결합 선택자

• 의사 클래스

• 의사 요소

전체 선택자

모든 요소를 선택한다. *(애스터리스크)는 ‘문서 내의 모든 요소’를 의미하는 기호이다.

태그 선택자

주어진 이름을 가진 요소를 선택한다. ‘유형 선택자’라고도 한다. 주어진 이름을 가진 요소가 다수일 경우, 해당 요소들을 모두 선택한다

클래스 선택자

주어진 class 속성값을 가진 요소를 선택한다. 주어진 class 속성값을 가진 요소가 다수일 경우, 해당 요소를 모두 선택한다.

아이디 선택자

주어진 id 속성값을 가진 요소를 선택한다. id는 고유한(unique) 식별자 역할을 하는 전역 속성이다.

그룹 선택자

다양한 유형의 요소를 한꺼번에 선택하고자 할 때 사용한다. 쉼표(,)를 이용해 선택자를 그룹화한다.

대상이 선택자라면 타입 구분 없이 선택할 수 있다.

선택자가 겹치는 경우

선택자가 겹치는 경우, 기본적으로 나중에 작성된 스타일이 적용된다.

선택자가 다르지만 요소가 겹치는 경우, 선택자 우선순위에 의해 적용될 스타일이 결정된다.

선택자 내용 정리

• 선택자는 어떤 요소에 대한 스타일을 정의할 것인지에 대한 정보이다.
• 기본 선택자로는 전체 선택자, 태그 선택자, 클래스 선택자, 아이디 선택자 등이 있다.
• 그룹 선택자는 여러 개의 선택자를 그룹화할 수 있는 선택자이다.
• 문서 내에 동일한 선택자가 존재하는 경우, 뒤에 작성 스타일이 적용된다.
• 서로 다른 선택자가 동일한 요소를 선택한 경우, 우선순위를 고려해야 한다.

전체 선택자 - *{}
아이디 선택자 - #{}
클래스 선택자 - .{}
태그 선택자 - p{}
그룹 선택자 - p, h{}

텍스트 관련 속성

• font-family : 글꼴을 정의한다.

• font-size : 글자 크기를 정의한다.

• text-align : 정렬 방식을 정의한다.

• color : 글자 색상을 정의한다.

font-family

요소를 구성하는 텍스트의 글꼴을 정의한다. 글꼴명을 속성값으로 지정한다.

여러개의 글꼴을 연달아 기입하여 우선 순위를 지정할 수 있다.

Times를 우선 지정하되, 지원되지 않을 경우 monospace를 지정한다. 단 글꼴이 설치되어 있어야 한다.

font-size

수치와 단위를 지정해 글자의 크기를 정의할 수 있다.

text-align

블록 내에서 텍스트의 정렬 방식을 정의한다. 미리 정의된 키워드 값을 지정한다.

color

텍스트의 색상을 정의한다. 다양한 방법으로 색상을 지정할 수 있다.

이 세가지 색은 모두 같은 색이다.

RGB

RGB 색상은 빛의 삼원색(Red, Green, Blue)을 혼합하여 색을 정의하는 방식이다.

모든 수치가 가장 높을 때 흰색이 된다.

텍스트 내용 정리

• font-family는 글꼴을 지정하는 속성이며, 여러 글꼴을 연달아 기입하여 우선순위를 지정할 수 있다.
• font-size는 글자 크기는 지정하는 속성이며, px, rem, em 등의 단위를 사용 할 수 있다.
• text-align은 블록 내에서 텍스트의 정렬 방식을 정의한다.
• color는 다양한 방법으로 텍스트의 색상을 정의한다
• 부모 태그를 대상으로 텍스트 관련 속성을 부여하면, 자식 태그에게도 영향을 끼친다.

display & border

블록 레벨 요소 : 자기가 속한 영역의 너비를 모두 차지하여 블록을 형성한다.

인라인 요소 : 자기에게 필요한 만큼의 공간만 차지한다.

display 속성

display 속성은 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지 정의한다.

더불어 자식 요소를 배치할 때 사용할 레이아웃을 설정할 수도 있다.

border 속성

border 속성을 사용하면 요소가 차지하고 있는 영역에 테두리를 그릴 수 있다.

border 속성에는 속성값으로 테두리의 두께, 모양, 크기 등을 함께 지정할 수 있는데,

이러한 속성을 ‘단축속성’이라 한다.

=> 두께가 2px인 직선 모양(solid)의 초록(green) 테두리를 만든다.

border 속성의 하위 속성

border 속성에 지정하는 값들을 따로따로 지정할 수도 있다.

display & border 내용 정리

• display 속성은 요소의 블록 레벨, 인라인 여부를 변경 처리할 수 있다.
• display 속성은 요소를 배치할 레이아웃을 결정할 때도 사용될 수 있다.
• border 속성은 요소가 차지하는 영역에 테두리를 그릴 수 있다.
• border는 여러가지 속성을 함께 정의할 수 있는 ‘단축속성’이다.
• border의 하위 속성은 border-style, border-width, border-color이다.

박스 모델

박스 모델 (Box-Model)

브라우저가 요소를 렌더링 할 때, 각각의 요소는 기본적으로 사각형 형태로 영역 을 차지하게 된다.

이 영역을 ‘박스’라 표현하며, CSS는 박스의 크기, 위치, 속성 (색, 배경, 테두리 모양 등)을 결정할 수 있다.

하나의 박스는 다음 네 개의 영역으로 구성된다.

콘텐츠 영역 - 콘텐츠에 필요한 영역이다.
안쪽 여백 - 콘텐츠는 기본적으로 둘러싸고 있는 여백을 가진다.
경계선 (테두리) - border
바깥쪽 여백 - 다른 요소들과 겹치지 않기 위해서 지정해둔 여백

박스 각 영역의 크기를 정의할 수 있는 속성은 다음과 같다.

• 콘텐츠 영역 : width, height

• 안쪽 여백 : padding

• 바깥쪽 여백 : margin

• 테두리 : border-width

블록 레벨의 특성

블록의 콘텐츠영역 크기를 지정하고, 경계선과 안쪽 여백(padding)을 추가하면 콘텐츠영역의 크기가 커진다.
따로 너비를 지정하지 않았을 때는, 콘텐츠 영역이 전체 너비를 차지한다.
따로 너비를 지정했을 때는, 바깥쪽 여백이 전체 너비를 차지한다.
바깥쪽 여백이 따로 지정되었더라도, 이 특성은 유지된다.
박스 레벨 요소의 width는 포함된 영역에 꽉 차는게 기본이다.
height는 콘텐츠 양에 따라 결정되는 것이 기본이다.

padding 과 margin

여백은 상하좌우 네 개의 면에 존재하는 영역이다.

작성자는 각 면에 개별적으로 두께를 정의할 수 있다. 이를 위해 다음 두 가지 방법을 사용한다.

• 하위 속성 정의하기

• 여러 값을 한 번에 정의하기

하위 속성 정의하기

모든 여백은 네 면에 대한 하위 속성을 가진다.

모든 여백은 네 면에 대한 단축 속성으로써 사용될 수 있다.

margin 에도 동일한 접미사를 붙여 개별 정의할 수 있다.

1가지 단축 속성 사용 시 상하좌우 수치가 통일된다.

2가지 단축 속성으로 사용 시 각각 상하, 좌우의 속성값이 된다.

3가지 단축 속성으로 사용 시 각각 상, 좌우, 하의 속성값이 된다.

4가지 단축 속성으로 사용 시 각각 상, 우, 하, 좌의 속성값이 된다.

여러 값을 한 번에 정의하기

box-sizing

=> 너비와 높이가 같더라도, box-sizing 속성값에 따라 크기가 달라질 수 있다.

box-sizing 속성은 요소의 너비(width)와 높이(height)를 계산하는 방법을 지정한다.

content-box는 기본값으로 너비와 높이가 콘텐츠영역, 즉 내부 여백 전까지만 포함한다.

이 경우 padding이나 border, margin을 추가해도 콘텐츠 영역의 크기는 변함없다.

border-box는 너비와 높이가 테두리(border)까지 포함한다.

margin은 영역에 포함이 안되므로 기본값처럼 외부로 증가하지만, padding이나 border의 값을 부여 하면 콘텐츠 영역이 줄어든다.

background

배경(background)은 콘텐츠의 배경을 정의한다.

단축 속성으로써 색상, 이미지, 반복 등 다양한 하위 속성을 정의할 수 있다.

CSS에서 소스파일을 사용하기 위해서는 url() 함수를 사용해야 한다.

배경의 크기보다 소스파일의 크기가 작을 경우, 소스파일이 반복해서 입력된다.

이 때, 배경 이미지의 반복 방법을 정의한다.

반복하지 않기 위해서 no-repeat을 입력한다.

박스 모델 내용 정리

• 브라우저는 요소를 렌더링할 때 박스 모델에 따라 사각형으로 표현한다.
• 하나의 박스는 네 개의 영역으로 구성된다.
• 콘텐츠 영역, 안쪽 여백, 경계선, 바깥쪽 여백.
• 각 영역의 크기를 정의하는 속성이 존재한다.

• 여백은 상하좌우 네 면에 존재하는 영역이다.
• 상하좌우 개별 속성을 사용하면 여백 두께를 개별 정의할 수 있다.
• padding과 margin 속성에 여러 면의 여백을 함께 정의할 수 있다.
• 어떤 방법을 사용할지는 사용자(개발자) 마음이다.

• 박스 모델에 너비와 높이를 지정하면, 콘텐츠 영역의 크기가 결정된다.
• box-sizing 속성은 너비와 높이가 포함할 영역을 변경함으로써 너비와 높이 의 계산 방법을 결정할 수 있다.
• box-sizing의 기본값은 content-box이다.
• box-sizing을 border-box로 지정하면 테두리까지 너비와 높이에 포함된다.

• background는 콘텐츠의 배경을 정의한다.
• 단축 속성으로써, 다양한 하위 속성을 포함한다.
• 하위 속성을 한 번에 정의할 경우, 정의할 속성과 정의를 생략할 속성을 다양하게 선택할 수 있어 여러 경우의 수가 존재한다.

부동 요소

float

float 속성은 요소가 문서의 일반적인 흐름에서 제외되어 자신을 포함하고 있는 컨테이너의 왼쪽이나 오른쪽에 배치되게 한다.

=> 문서의 흐름에선 제외되지만, 필요한 만큼의 공간은 차지한다.

clear

clear 속성은 float 요소 이후에 표시되는 요소가 float을 해제(clear)하여 float 요소의 아래로 내려가게 할 수 있다.

=> clear: both; 를 사용하면 한방에 해결할 수 있다.

float 내용 정리

• float 속성은 요소가 자신을 포함하고 있는 컨테이너의 왼쪽이나 오른쪽에 배치되게 한다.
• 이때 요소는 문서의 흐름에선 제외되지만, 필요한 만큼의 공간은 차지한다.
• clear 속성은 float 요소 이후에 표시되는 요소가 float 요소의 아래로 내려 가게 할 수 있다.

position

position은 문서 상에 요소를 배치하는 방법을 정의한다.

position이 요소의 배치 방법을 결정하면, top, bottom, right, left 가 최종 위치를 결정하는 방식이다.

position 속성값

position 속성에는 다음 속성값들을 지정할 수 있다.

position: relative;

요소를 일반적인 문서 흐름에 따라 배치하되, 상하좌우 위치 값에 따라 오프셋을 적용한다.

오프셋(보충)이란, 위치를 얼마간 이동시키는 것을 의미한다!

top이 bottom 보다 우선순위를 가지고, left가 right보다 우선순위를 가진다.

position: absolute;

요소를 일반적인 문서 흐름에서 제거하고, 상위 요소 중 가장 가까운 postion 지정 요소에 대해 상대적으로 오프셋을 적용한다. position 지정 요소란, position 속성에 속성값이 정의되어 있는 요소이다.

position: fixed;

요소를 일반적인 문서 흐름에서 제거하고, 지정된 위치에 고정시킨다.

요소가 화면에 고정되어 스크롤을 내려도 그 자리에 남아있다.

position: sticky;

요소를 일반적인 문서 흐름에 따라 배치하고, 스크롤(scroll) 되는 가장 가까운 상위 요소에 대해 오프셋을 적용한다.

=> 스크롤 이동으로 요소가 움직여도 스티키 요소는 고정된 상태를 유지한다.

스크롤이 종료되면 스티키 요소또한 종료된다.

보라색 공간이 스티키 요소이며, 노란색 공간에 적용되어있는 상태이다.

스크롤을 내려도 보라색공간은 고정되어있고, 노란색공간이 끝나면 스티키 요소의 스크롤이 시작된다.

position 내용 정리

• position은 문서 상에 요소를 배치하는 방법을 정의한다. 기본값은 static 이다.
• top, bottom, right, left 를 선택적으로 사용해 위치를 지정한다.
• relative 는 자기의 원래 위치를 기준으로 오프셋을 적용한다.
• absolute는 가장 가까운 포지션 요소를 기준으로 오프셋을 적용한다.
• fixed는 고정되어 움직이지 않는다. 스크롤 이동에도 꼼짝 않는다.
• sticky는 스크롤 되는 상위 요소를 기준으로 오프셋을 적용한다.

'AI 솔루션 개발자과정(Java, Python)' 카테고리의 다른 글

26일차 - 반응형 웹, 플렉스 박스와 그리드 레이아웃 (0)	2022.11.14
25일차 - CSS / flexbox, 선택자, 의사 클래스, 의사 요소, 상속과 공용 키워드, z-index, %와 미디어 쿼리, 변형과 전환, 애니메이션 (0)	2022.11.11
23일차 - 프론트 엔드 HTML 문단, 태그, 속성, 컨테이너, 전역 속성, 링크, 타겟, 목록, 입력, 폼(form) (0)	2022.11.09
22일차 - 문자 스트림, 파일 시스템, NIO, 쓰레드 (0)	2022.11.08
21일차 - 스트림, 시간과 날짜에 관련된 클래스, 파일 입출력(I/O) 모델과 스트림, 파일입출력 필터 스트림과 버퍼링 기능. (0)	2022.11.07

ABOUT ME