티스토리 뷰
1. HTML, CSS에 대한 기본기
웹 개발을 처음 경험하면서 JS 공부도 없이 React부터 공부를 했다. 하지만 이후에 JS에 대한 이해도가 떨어져 React를 제대로 활용할 수가 없었다. 그래서 기본기가 중요하다고 생각을 했다. 배우는 것은 빠르지만 그만큼 잊어버리는 것도 빠르다. 잊지 않기 위해서 블로그에 기록을 하고 있다.
화면 구성은 CSS 프레임워크를 사용했었다. 템플릿을 가져와 만들다 보니 정작 내가 원하는 대로 UI를 만들 수 있는가?라는 질문에 'Yes'라고 답을 할 수 없었다. 만들긴 해도 엄청난 시간이 들어갔고, 기본적인 개념에서 흔들렸다. 결국 기본이 부족했다. 템플릿을 사용하지 않고 내가 원하는 대로 UI를 만드는 것이 생각보다 어려웠다. 그래서 결국은 React에서 HTML까지 되돌아오게 됐다. 그래서 기본기를 제대로 쌓으면서 학습을 하고자 한다.
몇번의 면접 경험을 통해서 기본이 부족하다는 것을 깨달았다. 내가 알고 있는 것을 누군가에게 설명하는 것은 굉장히 어려웠다. 나의 기본이 부족하고 정확하지 않기 때문이다. 남에게 설명할 수 있는 정도의 학습을 하는 습관을 들이도록 하자.
1.1. HTML(HyperText Markup Language)은 무엇인가?
- HyperText : 다른 위치나 다른 웹 페이지로 이동할 수 있도록 만들어진 요소. 이전에는 이동하기 위한 요소만을 지칭했지만, 지금은 웹 문서를 이루고 있는 요소 모두를 의미한다.
- Markup : 데이터를 어떤 방식으로 표현할 것인가? 요소 하나하나가 어떤 역할을 가지고 있고 어떻게 보여질지를 정의하는 언어이다.
markdown이란?
텍스트 기반의 경량 마크업 언어. 일반 텍스트로 서식이 있는 문서를 작성하는 데 사용되며, 일반 마크업 언어에 비해 문법이 쉽고 간단한 것이 특징이다.
즉, 웹 문서의 기본적인 골격을 담당한다.
1.2. CSS(Cascading Style Sheets)
HTML의 각 요소들의 레이아웃, 스타일링을 담당.
1.3. JavaScript
사용자와의 인터랙션을 담당. (ex. Textbox의 올바른 입력이 되지 않았다면 사용자에게 경고창을 띄우기)
2. HTML 문서의 구조
<!DOCTYPE html>: HTML5 웹 표준화 이후, 적지 않아도 되지만 관습화가 되었다.html: 페이지 전체의 컨텐츠를 감싸는 루트 요소head: 웹 브라우저 화면에 직접적으로 나타나진 않는 웹 페이지의 정보meta tag: 문서의 일반적인 정보와 문자 인코딩을 명시title: 탭에 나타나는 정보
body: 웹 브라우저 화면에 나타나는 모든 콘텐츠
2.1. 태그를 구분짓는 특성
- 구획을 나누는 태그
- 단독으로 사용했을 때에는 눈에 보이지 않는다.
- 여러가지 요소들을 묶어서 그룹화
- 그 자체로 요소인 태그
- 단독으로 사용했을 때에도 눈으로 확인할 수 있다. (ex. button, a 태그)
2.2. 블록(Block)과 인라인(Inline)
- 블록
- 블록 레벨 요소는 언제나 새로운 줄에서 시작하고, 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지한다. (최상단 왼쪽에서부터 위치하게 된다.) 상자를 아래로 쌓는다.
- 인라인
- 인라인 요소는 줄의 어느 곳에서나 시작할 수 있다.
- 바로 이전 요소가 끝나는 지점부터 시작하여, 요소의 내용만큼만 차지한다.
포함 규칙
같은 형태의 다른 요소를 안에 포함할 수 있다.
대부분의 블록 요소는 다른 인라인 요소도 안에 포함할 수 있다.
인라인 요소는 블록 요소를 포함할 수 없다 ❌
웹 표준, 웹 접근성, 웹 호환성
- 웹 표준 : HTML이 표준화 되기 이전에는, 익스플로러의 activeX처럼 독자적인 플러그인이 존재했다. 웹 표준을 준수하여 작성한다면 운영체제, 브라우저마다 의도된 대로 보여지는 웹 페이지를 만들 수 있다.
- 웹 접근성 : 대표적인 예로 구글에서는 마우스 없이 tab으로도 메뉴 이동이 가능하고, 음성 인식을 통해서 검색이 가능하다.
- 웹 호환성(Cross Browsing) : 웹 표준 준수를 통한 브라우저 호환성 확보.
'TIL(Today I Learn)' 카테고리의 다른 글
| HTML, CSS 기본기 다지기(CSS)(3) (0) | 2021.09.29 |
|---|---|
| HTML, CSS 기본기 다지기(2) (0) | 2021.09.28 |
| 왜 CSR(Client Side Rendering)에서 SEO가 단점일까? (0) | 2021.09.08 |
| [JS] 자바스크립트 filter(), find(), map() 함수 사용법 (0) | 2021.08.05 |
| [JS] 자바스크립트 '==' 와 '==='의 차이 (0) | 2021.08.05 |
- HEXO
- 백준
- JavaScript
- 마크다운 이미지 업로드
- 42서울 합격
- 42서울 합격 후기
- C언어 문제
- 프로그래머스 코테
- 프로그래머스 코딩테스트
- vscode commit vi
- 42서울 라피신
- git vi
- html
- Git
- vscode
- css
- 알고리즘
- C언어문제
- JS
- 프로그래머스 자바
- React
- 프로그래머스 카카오
- c언어알고리즘
- 42seoul
- 42서울
- c언어 함수
- flexbox
- C언어
- windows 10 ubuntu
- 자바스크립트