[TIL] FrontEnd 관련 이것저것 1 (HTML, CSS)

백엔드에 관한 내용을 본격적으로 시작하기 전에 간단하게 프론트엔드에 관련한 것들을 공부해보았다.

 

 

HTML (Hypertext Markup Language) - 웹 페이지 문서 담당 (구조)
CSS (Cascading Style Sheets) - 웹 페이지 디자인 담당 (표현)
JS (JavaScript) - 웹 페이지 이벤트 담당 (동작)

 

HTML

 

<a> 태그는 하나의 문서에서 다른 문서로 연결하기 위해 (하이퍼링크) 사용
tag를 서로 중첩해서 사용할 수 없다.
href 속성은 하이퍼링크를 클릭했을 때 이동할 문서의 URL이나 문서의 책갈피를 지정한다.
target 속성은 하이퍼링크를 클릭했을 때 현재 윈도우 또는 새로운 윈도우에서 이동할지를 지정.
_blank : 링크 내용이 새 창이나 새 탭에서 열린다.
_selft : target 속성의 기본 값으로 링크가 있는 화면에서 열린다.
_parent : 프레임을 사용했을 때 링크 내용을 부모 프레임에 표시.
_top : 프레임을 사용했을 때 프레임에서 벗아나 링크 내용을 전체 화면에 표시

 

 

CSS

css 순서 적용

스타일 적용 우선순위는 "인라인 스타일 > 내부 스타일 시트 > 외부 스타일 시트" 순이다.

 

CSS 선택자 

일반 선택자 - 전체 선택자, 타입 선택자, 클래스 선택자, ID 선택자
일반 선택자의 우선순위는 전체 선택자 < 타입 선택자 < 클래스 선택자 < ID 선택자이다.
복합 선택자 - 자식 선택자, 하위 선택자, 인접 형제 선택자, 일반 형제 선택자

일반 선택자 - "* { }"
HTML 문서 내 모든 element를 선택
잘 사용되지 않으며 우선순위가 가장 낮다.

타입 선택자 - "elementName { }"
태그명을 이용해서 스타일을 적용할 태그를 선택
1개 이상의 HTML 엘리먼트를 사용할 수 있다. 여러 엘리먼트를 선택할 때에는 컴마(,)로 구분

클래스 선택자 - ".className { }"
클래스 명은 공백 없이 대소문자 또는 Hypen(-), UnderScore(_)로 시작.(기호나 숫자 시작 X)
HTML 문서에서 동일한 클래스 명을 중복해서 사용 가능. (공통 속성 적용)
class 속성 값에 하나 이상의 클래스를 적용 가능. (공백으로 구분)

ID 선택자 - "#IDName { }"
HTML 문서에서 동일한 ID를 중복 사용할 수 없다.(Class와 달리 ID는 유일해야 함.)
id 속성 값엔 1개의 id만 사용 가능
일반 선택자 중 가장 우선순위가 높다.

자식 선택자 - "element > element { }"
자식 선택자는 1단계 하위 요소(child)에만 적용

하위 선택자 - "element element { }"
하위 선택자는 1단계 하위 요소(child)와 2단계 이상 하위 요소(descendant)에 모두 적용.

인접 형제 선택자 - {element + element { }"
형제 관계인 엘리먼트가 여러 개 존재할 경우 첫 번째 엘리먼트만 선택

일반 형제 선택자 - {element ~ element { }"
형제 관계인 엘리먼트가 여러 개 존재할 경우 모든 엘리먼트를 선택.

 

 

CSS 규칙 적용 우선순위

같은 엘리먼트에 두 개 이상의 CSS 규칙이 적용된 경우 마지막 규칙, 구체적인 규칙, !important가 우선 적용
CSS 규칙들 중 하단에 작성한 규칙이 마지막 규칙이다.
p { }보단 p b { }가 더 구체적이므로 p { }가 아닌 p b { }가 적용됨.
속성 값 뒤에 !important를 작성하면, 같은 엘리먼트에 대해 보다 우선적으로 스타일 적용.

 

 

CSS position, display

display
화면에 나오는 엘리먼트는 Inline과 Block 두 가지로 분류된다.
Inline-level 엘리먼트는 줄 바꿈 없이 연속으로 이어지며 <span>이 대표적이다.
Block-level 엘리먼트는 줄 바꿈이 생기며 <div>가 대표적이다.
display 속성 사용법은 "E { display : none | block | inline | ... }"이다.

포지셔닝
포지셔닝(Positioning)은 시각적인 측면에서 HTML의 가장 중요한 요소이다.
HTML 내 부분 문서의 위치를 지정하거나 객체(Object)의 보임과 안보임(visibility)을 다룬다.
엘리먼트의 위치를 고정시키거나 브라우저의 크기에 따라 이동하는 등의 설정을 한다.
정적인 HTML을 JavaScript를 이용하여 동적(Dynamic)으로 만들기 위한 가장 기본적인 속성.

 

position
static : 기본(default) 값으로 일반적인 내용물의 흐름. 상단(top)과 좌측(left)에서의 거리를 지정할 수 없다.
relative : HTML 문서에서의 일반적인 내용물의 흐름을 말하지만 top, left 거리를 지정
absolute : 자신의 상위 box속에서의 top, left, right, bottom 등의 절대적인 위치를 지정
fixed : 스크롤(scroll)이 일어나도 항상 화면상의 지정된 위치에 있다.

Semantic의 사전적 의미는 '의미론적인', '의미가 통하는'이다.
검색 로봇 또는 스크린 리더 등의 기계가 쉽게 해석하고 분석할 수 있도록 만들어진 태그
semantic tag란 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 한다.
semantic 웹이란 웹에 존재하는 수많은 웹페이지들에 메타데이터를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 '의미'와 '관련성'을 가지는 거대한 데이터베이스로 구축하고자 하는 발상이다.

 

CSS 요약

 

CSS 선택자는 HTML 문서 내에서 스타일을 적용하고자 하는 element를 선택
일반 선택자, 복합 선택자, 가상 클래스 선택자, 가상 엘리먼트 선택자, 속성 선택자가 존재
포지셔닝 속성은 HTML 문서 내에서 element의 화면 배치나 스크롤 여부 등을 설정
font 속성은 글꼴, 크기 등의 글 꾸밈을 담당
text 속성은 여백, 들여 쓰기, 정렬 등의 공간 설정 기능을 담당