HTML 기본, 기초(21~24)

 

2021.01.09(+2021.01.11)

 

----------------------html----------------------

로고같은 경우 h1태그를 쓴다.(div가 아닌)

<img src="" alt="'> : alt는 이미지파일이 나오지 않을 때 또는 시각장애인분들을 위해 이미지를 설명하는 글을 쓰면 됨.

브라우저의 창을 줄이면 일정한 값 이하가 되어야 컨텐츠가 작아지고, 창을 늘여 일정한 값 이상이 되면 컨텐츠가 커지는걸 멈추는 것을 구현하고 싶을때 min_width, max_width를 쓴다.

min_ or max_width를 쓸 때는 범위가 어딘지 생각해야 하며 필요시 div를 container란 이름으로 한 번 더 감싸준다.

특히 container는 가운데정렬이 필요할 때 매우 자주 쓰인다.

 

h1 포지션 absolute값을 줄 때는 어디를 기준으로 absolute될건지 생각해야함

 

float속성을 사용하면 부모가 자신의 height값을 모름. 그래서 원치 않는 영향을 주게 되는데 그걸 해결하려면 영향을 받는 클래스에 clear both; 속성을 표기해줘야 함.

 

인라인 요소에 크기를 줘야할 때는 display: block; 으로 변경해줘야 함

 

----------------------css----------------------

margin, padding 단축표기법

margin 상 우 하 좌; -> 인자 4개, 위에서부터 시계방향으로 적용됨

margin 상 좌우 하; -> 인자 3개

margin 상하 좌우;   -> 인자 2개

margin 상하좌우;    -> 인자 1개. 모든 면이 같은 값으로 적용됨

가운데 정렬 하는법 : margin: 0, auto;

 

폰트 적용(오픈소스) : fonts.google.com/

위의 폰트 링크를 head영역에 추가하면 됨

 

하이퍼링크 밑줄 삭제하기 : text-decoration: none;

선긋기 : border-bottom(or top, left, right): 두께 모양 색깔;

 

li는 포맷팅이 되면서 줄바꿈이 일어나고, 그래서 예기치 않은 여백이 발생하기도 함. 해결방법은 list에 font-size :0;, list-item에 font-size를 따로 지정해주면 됨.

 

list아래의 a요소 스타일 지정 시 두 가지 방법이 있음

.list-item a    : list-item아래의 모든 a태그 해당(자식요소들까지)

.list-item > a : list-item아래의 a태그만 해당

 

html에 쓴 글이 소문자 또는 대문자로 모두 쓰여야 할 때 html에 쓴 글자를 바꾸는게 아닌 text-transform: uppercase(lowercase); 태그를 넣으면 됨.

 

--------------------문제점과 해결---------------

1. margin, padding, min, max가 적용이 안됨

해결 : 단축표기법이 아닌 일일히 하면 적용됨. 3개 인자 단축표기법은 적용됨( +갑자기 왜 되지)

 

2. a {text-decoration: none;} 활성화 안됨