시멘틱 사용 이점

  • 웹 접근성 향상
  • 가독성 향상 및 유지보수 편리
  • 검색엔진 최적화

div 태그에 class ="header","footer","main" 이런식으로 하는 것보다 body , header , main, footer 식으로 관리하는게 편하다

 

종류 (자주 사용하는거 간단하게..)

  • header : 페이지에 대한 정보 담는 태그 , 페이지 상단 위치
  • nav : 페이지와 전체적으로 관련성은 있지만 세부 내용과는 직접적인 연관 없는 분리 된 내용 포함
  • aside : 주로 main content 를 정의 할 경우에 사용
  • section : 문서, 프로그램등의 일반적인 섹션 표현
  • article :  여러가지 아이템을 묶어 재사용 가능하게 한 그룹화
  • footer :  주로 저작권 정보 및 서비스 제공자 정보 등을 기입 하며 페이지 하단 위치

box-sizing

  • content-box :  콘텐츠 영역을 기준으로 크기를 정함
  • border-box : 테두리 기준을 크기로 정함
  • initial :  기본값으로 설정
  • inherit : 부모 요소의 속성 값을 상속

border-box 안하면 padding 제외 사이즈가 width 값으로 정해지기 때문에 디자인이랑 다른 결과물 나올 수 있음

 

 

width , height 에 대한 정리

인라인 요소

대표적인 인라인 태그 span 태그 기준

width : 컨텐츠 크기만큼 늘려줌

height :  컨텐츠 크기만큼 늘려줌

 

블록 요소

대표적인 블록 태그 div

width: 가로요소를 부모의 크기만큼 최대한 늘려줌

height: 세로요소를 컨텐츠 크기만큼 늘려줌

 

세로 요소에 지정된 값이 없고 컨텐츠 없으면 출력이 안됨. 

'etc > HTML-CSS' 카테고리의 다른 글

[CSS] - 자기 만족 정리  (0) 2024.11.22
"<style lang='scss'>" - 관련해서 생긴 이슈  (0) 2024.09.09
GNB·LNB·SNB·FNB 용어에 대해서  (0) 2024.01.23
input type="file" 에서 같은 파일(명) 등록하기  (0) 2022.11.24
[css 이론 및 기본 ] box (Block , Inline, Inline-block)  (0) 2020.12.01

margin : 0 auto; 는 대표적인 중알 정렬 속성 

 

1. margin : 0 auto

0 값은 위 아래 여백을 주지 않는다 의미. auto는 좌우 여백을 균등하게 배분 처리 하겠다는 의미

 

2. margin auto 안되는 상황

margin: auto 는 inline 속성에는 적용 되지 않음. inline 속성은 자기 자신 만큼의 영역값 (width, height) 을 지니고 있기 때문임

 

  • inline 속성이 아닌 block 속성으로 태그 변경
  • span 대신 div 태그 사용
  • 요소의 display 속성을 block 으로 변경

 

 

Block vs Inline

  • 대부분 HTML element 는 block 요소
  • header, footer, p, li, table, div, h1 등 모두 block 요소에 해당
  • block 요소 의미는 해당 요소 옆(좌우)에 다른 요소를 붙일 수 없다라는 의미
  • block 요소와 성질이 반대인 inline 도 존재
  • inline 요소는 요소끼리 서로 한줄, 바로 옆에 위치 할 수 있음
  • inline-block 은 하이브리드 모드라고 생각하면 됨. 기본적으로 inline 처럼 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치가 가능하지만 block 처럼 width , heigth 속성 지정 및 margin , padding 속성의 상하 간격 지정이 가능함

'etc > HTML-CSS' 카테고리의 다른 글

[CSS] - 자기 만족 정리 2  (0) 2024.11.22
"<style lang='scss'>" - 관련해서 생긴 이슈  (0) 2024.09.09
GNB·LNB·SNB·FNB 용어에 대해서  (0) 2024.01.23
input type="file" 에서 같은 파일(명) 등록하기  (0) 2022.11.24
[css 이론 및 기본 ] box (Block , Inline, Inline-block)  (0) 2020.12.01

먼저, 현재 다니는 회사에 입사 후 제가 제일 먼저 한 업무는 Vue SPA 프로젝트 도입 이였습니다.

 

벌써 2년 넘게 근무한 회사이지만 초기 입사 시기 회사 특성 상 프론트 관련 된 프로젝트나 부서는 없었다 보니 .. 회사에 근무 하시던 분들은 온전한 vue 기능을 사용하지 않고 있었으며... 실제로 vue 프로젝트는 cdn으로 스크립트를 가져와서 작성 되어 있었다...

 

 

 

 

시간이 지날 때마다 코드는 수정한다고 하였지만 .. 오전 출근 하자마자 오류건을 발견하여 간단히라도 기록 남겼습니다.

 

 

먼저 바뀌기 전 코드

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8" />
        <title>타이틀</title>
        <style lang="scss">
        	body {
            	.wrap {
                	//....자식 관련 리소스들
                }
            }
        </style>
    </head>
    <body>
		<div class="wrap">
        	//.... 자식 관련 리소스들
        </div>
	</body>
</html>

 

바뀐 코드

 

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8" />
        <title>타이틀</title>
        <style>
        	body {
            	// body 관련 코드..
            }
            
            body .wrap {
               // wrap 코드..
            }
            
            body .wrap ....자식코드들 {
            
            }
        </style>
    </head>
    <body>
		<div class="wrap">
        	//.... 자식 관련 리소스들
        </div>
	</body>
</html>

 

 

 

원인

  • 기존 css 네스팅방식은 sass, less 등 에서만 사용 하였지만 css 에서도 사용할 수 있게 되면서 최신 브라우저에서는 호환이 됨
  • 그러나 최신 브라우저에서 '만' 가능한 부분이기 때문에 구형 웹 브라우저 또는 모바일에서는 사용 할 수 없음
  • style lang ="scss" 는 vue cli 에서 편의를 위해 제공하는 기능이기 때문에 *.vue 확장자가 아니라면 사용 X

결론

  • 구형 웹브라우저 등을 위한 컴파일 된 스타일 형태로 전달하거나 css 형태로 전달하기
  • style lang = "scss" 사용하고 싶으면 vue파일 사용해라

 

참조

https://developer.chrome.com/docs/css-ui/css-nesting?hl=ko

 

CSS 중첩  |  Chrome for Developers

즐겨 사용하는 CSS 전처리기 기능 중 하나인 중첩 스타일 규칙이 이제 이 언어에 내장되어 있습니다.

developer.chrome.com

https://www.mizzu-creations.xyz/css-nesting

 

더 나은 CSS 코드 작성을 위한 CSS Nesting

CSS Nesting의 시대가 도래했다! CSS Nesting을 통해 CSS 코드 작성을 개선하는 방법

www.mizzu-creations.xyz

https://cli.vuejs.org/guide/css.html#pre-processors

 

Working with CSS | Vue CLI

Working with CSS Vue CLI projects come with support for PostCSS, CSS Modules and pre-processors including Sass, Less and Stylus. Referencing Assets All compiled CSS are processed by css-loader, which parses url() and resolves them as module requests. This

cli.vuejs.org

 

'etc > HTML-CSS' 카테고리의 다른 글

[CSS] - 자기 만족 정리 2  (0) 2024.11.22
[CSS] - 자기 만족 정리  (0) 2024.11.22
GNB·LNB·SNB·FNB 용어에 대해서  (0) 2024.01.23
input type="file" 에서 같은 파일(명) 등록하기  (0) 2022.11.24
[css 이론 및 기본 ] box (Block , Inline, Inline-block)  (0) 2020.12.01

내비게이션 바라고 불리는 이 카테고리 영역은 위치와 역할에 따라 GNB, LNB, SNB, FNB 등으로 나눌 수 있습니다.

1. GNB (Global Navigation Bar)

어느 페이지에 들어가든 공통적으로 사용 하는 메뉴.

보통 최상위 메뉴이며 상단에 위치합니다.

 

 

2. LNB (Local Navigation Bar)

 

GNB를 클릭하거나 마우스 hover를 하였을 때 소제목 형식으로 나오는 메뉴

 

3. SNB (Side Navigation Bar)

일반적으로 왼쪽에 있어서 LNB(Left Navigation Bar)라고 불리기도 합니다. (오른쪽에 위치할 수도 있어요)

4. FNB (Foot Navigation Bar)

웹사이트 가장 하단 Footer에 위치한 메뉴 

 

 

 

위 내용들은 개인 공부용으로 만들었습니다.

참고 사진들은 인프런 사이트를 참조하여 올렸습니다!

'etc > HTML-CSS' 카테고리의 다른 글

[CSS] - 자기 만족 정리  (0) 2024.11.22
"<style lang='scss'>" - 관련해서 생긴 이슈  (0) 2024.09.09
input type="file" 에서 같은 파일(명) 등록하기  (0) 2022.11.24
[css 이론 및 기본 ] box (Block , Inline, Inline-block)  (0) 2020.12.01
[css 이론 및 기본] box sizing  (0) 2020.12.01

+ Recent posts

티스토리툴바