HTML CSS(3)
-
[CSS] Sass & Scss ( Syntactically Awesome Style Sheets )
⚡️Sass 와 Scss 차이점 // .sass nav ul margin: 0 padding: 0 list-style: none li display: inline-block a display: block padding: 6px 12px text-decoration: none // .scss nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } } ⓵ sass 문법을 활용한 방법 ⓶ scss 문법을 활용한 방법 sass보다 scss 문법을 사용하는 것을 권장하고 있습니다. 왜냐하면 sass의 문법 ..
2023.01.04 -
[CSS] Block vs Inline & position
⚡️display block 요소의 의미 : 요소 바로 옆(좌우측)에 다른 요소를 붙여넣을 수 없다는 뜻입니다. block element :, , , , , , , , , , ,, , , , , , , , , , , 등 inline 요소의 의미 : 요소 바로 옆(좌우측)에 다른 요소를 붙여넣을 수 있다는 뜻입니다. inline element : , , , , , , , , , , , , , , , , , , , , ⚡️none : 화면에서 사라짐 display: none 으로 보이지 않다가, 텍스트를 입력하는 순간 JavaScript가 검색 목록 요소에 다른 클래스로 교체할 것입니다 ⚡️block div가 갖는 기본값. 가로 한줄을 다 차지(상자처럼 쌓임) ⚡️inline 컨텐츠를 딱 감쌀정도의 크기. ..
2022.09.20 -
[CSS] semantic web과 semantic Tags이해 /<img> 태그 <div> 태그에 background-image 속성 차이점
⚡️시맨틱 웹(Semantic Web) 이란? 시맨틱 웹이란 웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 ‘의미’와 ‘관련성’을 가지는 거대한 데이터베이스로 구축하고자 하는 발상이다. 시맨틱 웹은 개발자가 의도한 요소의 의미가 명확히 드러나게 작성하는 방법이자 방식입니다. 이 방법은 코드의 가독성을 높이며 유지보수를 높일 수 있습니다. ⚡️시맨틱 웹의 목적과 사용 이유 시맨틱 웹이 등장한 이유와 같이 웹상의 검색엔진의 최적화를 위해서 입니다. 우리는 현재 구글, 네이버 등과 같은 검색 사이트를 이용합니다. 그리고 이 검색 사이트들은 어떤 웹 사이트를 검색하기 위해 검색엔진을 사용합니다. 우리 개발자들은 프로덕트를 만들게 되면 사용자..
2022.09.19