html, css 헷갈리는 개념정리

97woo·2022년 1월 24일
0

위코드 1일차는 html css 기본개념에 대해서 repl.it으로 학습하고
문제을 해결하는 과정을 통해서 부족한 부분들을 학습할 수 있는 기회가 되었습니다.

html css

1.a태그 target

a태그를 사용할때 아래처럼 다른 페이지로 하이퍼링크로 정의할때 사용하는데

	<a href="http://www.naver.com">사이트로 이동!</a> 

공부하던중 target속성을 알게되었다
target속성은 속성 값을 정의하여 페이지가 열릴 위치를 정할수있다.

	<a href="http://www.naver.com" target="_blank">사이트로 이동!</a> 

target=
"_blank" 연결문서를 새창에서 엶
"_self" 연결문서를 자기 창에서 엶
"_parent" 연결문서를 부모창에서 엶 (단 부모창이 없을시 __self와 같다)
"_top" 연결문서를 가장 상위창에서 엶

2.text-indent

마찬가지로 잘몰랐던 들여쓰기에 대해서 학습 할 수 있엇다.
들여쓰기란
첫 시작을 스페이스바를 두번 눌러서 두칸 떨어진 상태에서 문장이 시작되고 있습니다. 이런 형태가 "들여쓰기" 입니다.

text-indent를 사용하면 css로 들여쓰기를 사용할 수 있다

	.example { text-indent: 10px;}

3.CSS selector의 우선순위

특정 태그에 속성이 중복 적용될 경우에는 우선순위에따라 적용이 되는데
우선순위는 다음과 같다

tag 1점
class 10점
id 100점
inline style 1000점
!important 10000점

전체선택자보다는 태그선택자가 우선되고,
태그선택자보다는 class선택자가 우선되고,
class선택자보다는 id선택자가 우선되고,
id선택자보다는 inline style이 우선되고,
제일 우선되는 것은 !important이다.

inline style이 헷갈리수 있는데

	<p id="text" style="color:red">

p태그 색깔을 레드로 지정한 것인데.
선택자보다도 태그에 직접적으로 스타일을 주는것이 더 우선순위이다.

html과 css는 다양한 페이지를 만들어보기 전까지는 까먹는 개념이 계속 나올듯한데..
기본적인 개념을 잘익히고 반복해서 완전히 내걸로 만드는게 중요할것 같다.

profile
한 발씩 나아가는중

0개의 댓글