HTML/CSS 나를 위한 정리

YuJangHoon·2022년 1월 30일

htmlcss

Web-Development

목록 보기

1/6

입문기라 쓰고 코딩애플님의 강의 복습이라고 읽는다.

🛒HTML을 배워볼까...? > 무지성 결제

유튜브를 돌아다니다가... 평소에 가끔씩 들어가서 보던 코딩애플님의 영상이 떠서 들어갔다

최근 나는 회사에서 데이터 파이프라인을 어떻게 하면 갖출 수 있을까를 굉장히 고민하고 있었고, 코딩애플님의 유튜브 채널을 보자마자 "그냥 차라리 웹개발을 배워서 내가 만들어버릴까...?" 라는 생각이 들었다.

그리고, 맛보기 강좌를 듣자마자... 무지성 결제를 해버렸다

회사의 웹사이트 개발은 핑계일 뿐이였고, 그냥 강의가 너무 재밌어보여서 결제해서 들어버렸다. 지금은 HTML, JS, Node.js, Vue 등등의 강의를 결제한 상태...

그냥 들으면 기억에 안남을 것 같아서 이렇게 정리를 해본다.

계속해서 업데이트하면서 복습할 예정이다 :)

HTML 태그

h1, p, input, div, a, button 등등 다양한 태그가 있으며, 상황과 기능에 맞는 태그들을 잘 찾아서 사용하는 것이 중요하다.

왜 중요하지?

SEO : Search Engine Optimization, 검색 최적화를 위해서
Accessibility : 웹 접근성, 리더기를 통해 음성으로 읽거나, 키보드 만으로 조작하는 경우에 용이하다
Maintainability : 유지/보수성, 개발자들을 위해서. 이것이 가장 중요한 포인트이다!

종류 정리

h1,h2,...,h6 : 제목에 이용
header : 로고나 메뉴아이템
nav : 그 외에도 여러 메뉴들이 모여있다면
footer : 제일 아래에 부가적인 정보나 링크들이 들어있다면
main : 웹에서 제일 중요한 메인 콘텐츠들이 들어있다면
aside : 메인 안에서 컨텐츠랑은 상관없는 부가적인 내용이 담겨있다면 (광고, 관련 링크)
article, section : 메인 안에서 중요 컨텐츠들이 들어있는, 그리고 그 안에서 또 나눌 때.
- article과 section의 차이 : 독립적인 컨텐츠 vs 연관 있는 컨텐츠를 묶을 때
i, em : i는 시각적으로 이탤릭체, em은 강조하는 이탤릭체
b, strong : b는 시각적으로 볼드체, strong은 강조하는 볼드체
ol, ul, dl : order list, 순서 / unorder list, No순서 / description list, 정의와 설명
img : 컨텐츠인 이미지 / background-image : 스타일링, 배경, 맥락과 관련 없음
button, a : 특정한 액션을 하는 경우에는 button / 어딘가로 링크가 걸려 이동할 때는 a
table: 행열이 필요한 데이터 (thead, tbody, tr, th, td) / css flex, grid : 정렬된 스타일링을 위한!
span : 텍스트의 일부만 스타일 변경하고 싶을 때. 큰 의미 없음
form : 무엇인가를 작성하고 제출하는 form에 사용된다
input : 사용자의 입력을 받을 수 있는, 아주 자주 사용되는 태그이다! type에 text, email, password, radio, file, checkbox, submit 등등 많은 종류들이 있고, placeholder, value, name 등의 다른 중요 속성들 있으니 검색해서 사용하자.
select, textarea : 셀렉트박스와 크기조정을 할 수 있는 큰 text입력란이다.
label : input과 관련해서 자주 사용되며, for과 id를 사용해 대신 눌러도 선택되게 할 수 있으며, input에 제목이 필요할 때도 이용되기도 한다.

CSS

HTML의 스타일을 지정해주는, 별도의 파일!
class, id, tag 등등 많은 것들에 style을 지정할 수 있다.

우선순위

style=""
#id
.class
tag
위와 같은 순서로 되어있으며, 더욱 디테일하게 지정될수록, 우선순위가 높아진다.
~~그러나 너무 중첩시키면 코드가 더러우니 그러지 말자~~

디자인

위에서 div박스 대신에 쓸 수 있는 많은 태그들이 있었다. 그만큼 페이지를 구성하는 요소를 네모네모한 박스들로 구분해 놓는 것이 중요하다는 의미이고, 머릿속으로 그리면서 설계하는 것이 굉장히 중요하다.

style들

대부분 영어를 할 수 있다면, 직관적으로 알 수 있는 것들이 대부분이다.
이곳에는 뜻만으로는 알 수 없는 내용이나 중요한 내용을 조금 적어두도록 하겠다.
(일부 스타일은 상속됩니다! 하위 태그에 물려주게 된다는 뜻이죵)

- display : block, inline, flex 등이 있는 매우 중요한 스타일이다.

float : 공중에 붕 뜨게 되고, 가로정렬 할 때 많이 사용한다. 사용시에는 float들을 싸매는 하나의 큰 div 박스를 만들고 폭을 지정해 주는 것이 좋다고 한다. 또한, 다음에 오는 박스들이 제자리를 찾게 하기 위해서는 clear:both 속성을 이용해야한다.
n% : 상위 태그에 대해 상대적으로 n%의 값을 가진다는 뜻이다! 유연한 사이즈 지정에 도움된다.
css ">" : 보통 하위요소를 지정할 때 띄어쓰기로 셀렉터 문법을 많이 사용하는데, 바로 직계 자식만 고르는 > 도 잊지말자
link의 text-decoration / :visited {} : 기본적인 밑줄을 제거 / 방문후 스타일 지정
background : -repeat, -position, -attachment 등의 디자인을 위한 속성들을 검색해서 사용하자.
margin collapse effect : 박스의 테두리가 만나면 margin이 통일되는 현상이 발생한다. 이를 해결할 방법은 부모 박스에 padding을 1px 주는 등의 방법이 있다.
position : static, relative, absolute, fixed 등의 속성이 있다. 고정하고, 상대적 위치 지정 등의 기능을 갖고 있으니, 검색해서 유용하게 사용하자.
box-sizing : border-box를 통해서 박스의 폭에 border가 포함되게 할 수 있다. 대부분의 div 박스들에 적용하면 좋은 속성이니 css에 지정해주면 좋을 듯 하다. 기본적으로 지정해주면 좋은 CSS 리스트는 따로 만들어 두는 것이 좋다.
input[type=email] : input의 특정 type의 요소들만 css 셀렉터로 스타일을 줄 수 있다.
vertical-align : 상하정렬
:nth-chiled(1) : 여러 요소들을 찾은 다음, n(1)번째의 요소만 스타일을 주고 싶다면 사용한다. 1자리에 even이나 odd를 넣어서 짝홀수 지정도 가능하다. 자세한건 검색!
td의 colspan 속성 : 셀병합
border-collapse : 표 내부 셀 사이의 간격 제거
:hover, :focus, :active : pseudo-class라고 부르며, 상황별 스타일 지정이 가능하고, 순서가 매우 중요하다