퍼블리싱수업 - 3일차(네이버)

김진우·2024년 1월 12일
퍼블리셔퍼블리싱
0

퍼블리싱

목록 보기
1/10

네이버 개념

1. HTML

wrapper

  • 사이트의 너비를 보장해주기 위해서 태그를 감싼 뒤 min-width를 잡아주기 위한 용도.

묶는 클래스 명(회사마다 컨벤션 다를 수 있음)

1->5 순서대로 점점 작아진다고 보면 됨.

  1. section, footer, header, article
  2. group
  3. area
  4. wrap
  5. box

ul, li

  • 아래와 같이 ul의 클래스는 "상황-list", li의 클래스는 "상황-item"으로 하는게 좋음.
<ul class="nav-list">
  <li class="nav-item">
</ul>

section

  • section 태그 class 네이밍시, 아래와 같이 사용

    sc-000, sec-000, section-00, section1,2,3,4 ,main-000, content1,2,3

  • 영역의 범위에 section 태그를 사용
    ex) 아래는 뉴스의 영역이니, <section class="sc-news"> 사용

aria-label

  • 접근성코드
    ex) 아래와 같이 button에 aria-label="이전슬라이드"로 입력 시, 장애인들이 해당 버튼에 대해 "이전슬라이드" 라고 읽을 수 있다.
<button class="btn-prev" aria-label="이전슬라이드"></button>

aria-label vs blind태그

둘 다 장애인을 위한 태그

  • aria-label의 경우, 컨트롤의 목적이고, 문서가 시멘틱 태그와 다르게 검색엔진에서 읽었을때, 문서가 구조화 되지는 않는 경우 사용.
  • blind태그의 경우, 시멘틱 태그에 blind를 줘서, 의미를 가지면서 숨겨야할때 사용.

tab(탭기능)

1. role="tablist"

장애인들이 탭에 해당하는거구나 하고 인식할수 있게 하는 것

ex) 아래와 같이, ul에 role="tablist"를 입력하여, tab이라는걸 인식하게 하고,
a를 링크로 인식하면 안되니, role="tab"을 입력하여 tab이라는걸 인식하게 하자.

<ul class="tab-list" role="tablist">
  <li class="tab-item">
    <a href="" role="tab">뉴스스탠드</a>
  </li>
</ul>

2. aria-selected

위의 tablist에서 선택되어져있는지, 장애인에게 알려주기 위한 태그

아래와 같다면, 뉴스스탠드가 선택되어있는상태이고, 스포츠가 선택되어있지 않다는 상태인걸 장애인들이 인식 가능

<ul class="tab-list" role="tablist">
  <li class="tab-item">
    <a href="" role="tab" aria-selected="true">뉴스스탠드</a>
    <a href="" role="tab" aria-selected="false">스포츠</a>
  </li>
</ul>

3. role="presentation"

위의 ul에서 role="tablist"가 입력되어있고, 바로 밑에 li가 있다면, 아래처럼 li에 role="presentaion" 이라고 입력 해야함.

미리보기의 용도로 입력.

<ul class="tab-list" role="tablist">
  <li class="tab-item" role="presentation">
    <a href="" role="tab">뉴스스탠드</a>
  </li>
</ul>

radio(라디오 기능)

  • 둘중에 하나 체크되는 기능
    ex) role="radiogroup"으로 묶어 주고, 하위항목들은 role="radio"를 부여
<div class="set-area" role="radiogroup">
  <button class="btn-list" role="radio">aaa</button>
  <button class="btn-list" role="radio">bbb</button>
<div>

aria-checked

  • 라디오 둘중에 한개 체크되어있는걸 시각장애인에게 알리기 위해서 사용
    ex)
<div class="set-area" role="radiogroup">
  <button class="btn-list" role="radio" aria-checked="true">aaa</button>
  <button class="btn-list" role="radio" aria-checked="false">bbb</button>
<div>

aria-expanded

  • 페이지가 펼쳐졌는지 닫혔는지, 시각장애인에게 알리기 위하여 사용됨
    ex) 아래는 페이지가 닫혀있다고 말해주고 있음.
<div class="util-area">
  <button class="btn-menu" aria-expanded="false">
</div>

aria-haspopup

  • aria-expanded에서 열림의 대상이 어떤건지 알려주는 것
    ex) 아래는 페이지가 닫혀있고, menu라는게 열리고 닫힌다 라는걸 말해줌.
<div class="util-area">
  <button class="btn-menu" aria-expanded="false" aria-haspopup="menu">
</div>

2. SCSS

폴더구조

asset

  • assets 폴더를 만든 뒤, 그 안에 모든걸 넣자!
    ex)

style.scss

style.scss는 asset폴더에 바로 빼두자,
style.scss은 아래의 scss들을 한곳에 모아두는 용도

ex) 아래와같이 style.scss에 모두 import해서 사용. 순서는 위에서부터 변수->폰트->리셋->이 적용되어야 헤더 푸터 메인에 적용이되니, 위의 순서를 지키는게 좋음.

@import './utils./var';
@import './utils/mixin';

@import './base/typo';
@import './base/reset';
@import './base/preset';

@import './layout/header';
@import './layout/footer';

@import './page/main';

base

페이지에서 쓰는 공통으로 쓰는것들 모아두는곳

  • _preset.scss : 누구나 공통으로 쓰는것
  • _reset.scss : 초기화
  • _typo.scss : 폰트

preset.scss

  1. blind
    아래와 같이 작성
.blind{
	position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    margin: -1px;
}

*clip은 요소의 특정부분만 보이게하는 속성

  1. skip-nav
    아래와 같이 작성
.skip-nav{
	position: absolute;
    top:0; left:0;
    a{
    	display: flex;
        align-items: center;
        justify-contents: center;
        position: absolute;
        width: 150px;
        height: 40px;
        background: #000;
        color: #fff;
        transform: translateY(-100%);
        &:focus,
        &:active{
        	transform: translateY(0);
        }
    }
}
  1. sp(스프라이트 이미지)
  • 아래와 같이 작성
.sp-bg1{
	background-image: url('경로')
    background-size: contain;
    background-repeat: no-repeat;
}
  • 사용시, 아래와 같이 @extend를 이용해서 사용
    ex)
.btn-keyboard{
	&::before{
    	@extend .sp-bg1;
    }
}

typo.scss

폰트를 넣는곳.

작성예시
ex)아래와같이 woff2 우선 불러오고 못했다 -> woff -> ttf 차례로 불러오게끔
*ttf는 불러온느방식이 다름.

@font-face{
	font-family: "본인이작성(시스템이름그대로작성하는거추천)";
    src: url('../fonts/000.woff2';) format('woff2');},
	url('../fonts/000.woff';) format('woff');},
    url('../fonts/000.ttf';) format('trueType');
    font-weight: normal;
    font-style: normal;
},

위처럼 작성 한 뒤, 폰트스타일, 등등 수치바꾸고싶으면 아래와같이 변수명 추가해서 사용하면됨.

@font-face{
	font-family: "본인이작성(시스템이름그대로작성하는거추천)";
    src: url('../fonts/000.woff2';) format('woff2');},
	url('../fonts/000.woff';) format('woff');},
    url('../fonts/000.ttf';) format('trueType');
    font-weight: normal;
    font-style: normal;
},
@font-face{
	font-family: "본인이작성(시스템이름그대로작성하는거추천)";
    src: url('../fonts/000.woff2';) format('woff2');},
	url('../fonts/000.woff';) format('woff');},
    url('../fonts/000.ttf';) format('trueType');
    font-weight: 100;
    font-style: italic;
}

  • woff2 웹오픈폰트포맷2 : woff에서 50%~20% 압축까지 되어있는것(woff보다 업그레이드버젼)

  • woff 웹오픈폰트포맷 : 모던브라우저(최신) 모두 지원, 가장 가볍고 좋음

  • ttf 트루타입폰트 : 보통 디자이너들이 포토샵에서 설치해서 쓴느 폰트(옛날방식)

  • otf 오픈트루타입폰트 : 보통 맥 유저들이 쓰는 폰트(옛날방식)

  • eot : 익스플로러 위한 폰트(안쓴다고보면됨)

  • sans-serif: 고딕체

  • serif: 명조체

layout

페이지에 푸터,헤더를 모아두는 곳

  • _footer.scss : 푸터
  • _header.scss : 헤더
  1. [class*="ico-"]{} : ico-로 시작하는 것들 선택하는 선택자

page

메인페이지를 놔두는 곳

  • _main.scss : 메인페이지
  1. 반복문
    ex) 아래의 경우 vt1~6까지 1일때 131px1, 2일때 131px2 ... 6일때 131px*6 까지 반복하여 나타남.
<i class="vt-line vt1"></i>
<i class="vt-line vt2"></i>
<i class="vt-line vt3"></i>
<i class="vt-line vt4"></i>
<i class="vt-line vt5"></i>
.vt-line{
	position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    background: #ebebeb;
    
    @for $i from 1 to 6{
    	&.vt#{$i}{
        	left: 131px*$i;
        }
    }
}

utils

변수를 놔두는 곳

  • _var.scss : 변수를 모아두는곳

reset.scss

  • 구글에서 reset.css를 검색하면 대표적으로 Meyer reset이 나오는데, 현재 시대에는 잘 맞지않음.
  • 현재에 맞게 작성된 reset.css를 구상한 페이지에 맞게끔 사용하자!
  • index.html에 링크 걸때, reset.scss파일이 style.scss에, 그리고 style.scss가 style.css로 변환되니 아래처럼 링크를 걸어주도록 하자.
    <link rel="stylesheet" href="./assets/css/style.css">

아래 링크 참고
https://velog.io/@teo/2022-CSS-Reset-%EB%8B%A4%EC%8B%9C-%EC%8D%A8%EB%B3%B4%EA%B8%B0#%EA%B7%B8%EB%9E%98%EC%84%9C-%EB%AD%98-%EC%93%B0%EB%A9%B4-%EC%A2%8B%EC%9D%84%EA%B9%8C

*{margin:0;padding:0;font:inherit;color:inherit;}
*, :after, :before {box-sizing:border-box;}
:root {-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%;cursor:default;line-height:1.5;overflow-wrap:break-word;-moz-tab-size:4;tab-size:4}
html, body {height:100%;}
img, picture, video, canvas, svg {display: block;max-width:100%;}
button {background:none;border:0;cursor:pointer;}
ul {list-style:none}
a {text-decoration:none}
fieldset{border:0;
table {border-collapse:collapse;border-spacing:0}
profile
김진우
Code log

0개의 댓글