멋사FE3

멋쟁이사자처럼 프론트엔드스쿨 3기 회고(9월 6일)

코구리 2022. 9. 7. 23:27

*포트폴리오 쓸 때는 주석을 꼼꼼하게 남겨서 내 코드를 잘 설명하자!

 

br

wbr- 화면이 부족할 때 줄바꿈 

그러나 이것을 지정하지 않아도 줄바꿈이 되는 것을 확인할 수 있는데 , 이는 word break 속성이 적용되어 있기 때문이다.

기본적인 word break : normal 은 줄바꿈이 단어와 단어 단위로 된다. 

그래서 white -space:no-wrap(감싸지 않게 된다) 을 적용하면 줄바꿈이 안된다. 여기서 wbr 태그를 적용하면 줄바꿈됨.

white-space:pre는 pre태그를 사용하는 거랑 동일한 효과이다. 

한글의 경우 글자마다 break 되며 영어는 단어마다 break된다. 한국어, 일본어, 중국어의 경우 word-break: break all 이 적용되어 있기 때문이다. 

 

HTML는 a로 연결된 책이다! 

1. href를 통해 경로 지정

2. 예외적으로 자식으로 grouping 하는것 허용

3. a, button 의 경우 자식으로 두지 않음

4. *target:blank 는 새로운 창을 열어서 a를 연결시키는 속성! 

내가 있는 폴더 안에서 파일을 찾을 때도 사용을 한다. 

5. 해쉬링크는 페이지 내의 이동이다. 참고로 scroll behavior:smooth 는 부드럽게 이동할 수 있게 한다. 

6. download 하면 파일을 다운로드할 수 있게 만든다. 값을 지정하면 다른이름으로 저장. 지정안하면 원래 파일 이름으로 저장한다.

7. 전화번호와 이메일 또한 인식하여 연결해준다.

 

b, strong

b는 의미가 없이 굵게 한다. 따라서 이제 쓰지 않는다. 시멘틱 태그 나오기 이전에 만들어짐.

strong은 강조해서 굵게 한다. 

 

i,em

i는 기울임 글꼴. 마찬가지로 스타일을 위해 탄생한 태그. 그러나 최근에 의미가 생겼는데 문단에서 주언어와 다른 언어로 표현된 부분을 표현

em은 같은 기울임 글꼴로 표현되지만 강조의 의미가 있음.

 

dfn

정의하고 있는 용어 . 최초로 등장했을 때 사용함.

 

abbr

준말, 약자

 

sub, sup

아래첨자, 위첨자(제곱이라든지)

 

span 

줄바꿈없이 영역을 묶는 용도 (div와 동일하게 디자인적으로 묶어야 할때.. 시멘틱한 태그 쓰고싶은데 없을때 최후수단. 다만 div는 줄바꿈이 된다.)

 

 

 

 

*실무에서의 팁

폰트 자체가 크기가 커서 보통 하나의 페이지에 많아야 두개 진짜 불가피할경우 세개정도 쓴다 그래서 거의 몇번 안쓰는 것들은 이미지로 하기도 한다. 

 

*article은 독립적인 어플리케이션으로써 동작하는가? 어색하지 않은가? 로 판단해라.

section형제요소는 section 으로 해주는게 좋음.