About Web

Sass 문법을 작성하다보면 변수를 사용하게 되는 경우가 많다.

변수를 사용하다보면 내가 생각하던 변수 값이 제대로 컴파일 되지 않고

에러가 나거나 이상한 값으로 css가 컴파일 되는 경우가 많이 있을 것이다.

그러한 경우엔 보통은 Interpolation 즉, 보간법을 사용하지 않고

변수만을 사용했기 때문에 그런 경우가 많다.

1. Interpolation(보간법) 의 특징

- #(샵) 특수문자와 {}(중괄호)를 사용하여 표기한다.  #{..}

- 삽입된 문자나 변수를 문자 그대로 적용시켜 연산이 되지 않게 한다.

- @mixin, @import, 일반적인 Sass 문법 등 변수나 문자를 통해 가변적인 값들을 적용해야하는 경우 사용한다.

보간법은 Sass 문법에서 가장 기본이 되는 내용이면서

모른다면 Sass 문법을 지나치게 제한적으로 밖에 사용할 수 없는 중요한 내용이다.

주로 사용하는 영역은

변수를 통한 클래스나 css내용 적용,

@each나 @mixin 등 문법을 작성할 때 주로 사용한다.

2. Interpolation(보간법) 의 사용

보간법의 사용 영역 중 주로 사용하는 몇가지 예시를 통해

보간법에 대해 알아보려한다.

1. 변수를 통한 클래스명 적용

/* 변수 */
$page: main;

/* SCSS 적용 (x) */
.$page_wrap{
  ...
}

$page라는 변수를 선언하고

.main_wrap 클래스를 만들고 싶어 .$page_wrap를 작성하여 문법을 작성해보았을 때

해당 내용은 컴파일 되지 않고 에러가 뜨게된다.

그래서 자바스크립트 문법 처럼 따옴표와 + 기호를 사용해서

'.' + $page + 'wrap' 라고 작성을 해도 마찬가지로 제대로 컴파일 되지 않는다.

이러한 경우에 보간법을 사용하여 내가 원하는 변수를 원하는 영역에 문자 그대로 넣을 수 있다.

/* 변수 */
$page: main;

/* SCSS 적용 (O) */
.#{$page}_wrap{
  ...
}

2. @each 문법에서 사용

/* SCSS */
@each $animal in (horse, tiger, lion){
  .#{$animal}{
    background:url('../images/' + $animal + '.jpg') no-repeat 0 0;
  }
}


/* CSS */
.horse {
  background: url("../images/horse.jpg") no-repeat 0 0;
}

.tiger {
  background: url("../images/tiger.jpg") no-repeat 0 0;
}

.lion {
  background: url("../images/lion.jpg") no-repeat 0 0;
}

위의 예시와 같이 @each문을 사용해서

원하는 클래스에 원하는 이미지를 넣게 될 경우

$animal이라는 가변적인 요소에 .(점)을 찍어 클래스명을 적용해야 하는데

단순히 .$animal{...} 로 적용하게 되면 .과 animal 내용이 연산처리가 되어 컴파일 에러가 뜬다.

이처럼 .(점)과 $animal이 단순히 문자열끼리의 조합을 만들고

그 문자로 문법을 적용해야할 경우 .#{$animal} 보간법을 사용한다.

3. Interpolation(보간법) 사용시 주의사항

보간법안에 들어간 변수들은 그 변수가 숫자일지라도

문자로 인식을 하기 때문에 숫자를 넣어서 사용하게 될 경우

내가 원하는 값이 맞는지 컴파일 된 내용을 확인해볼 필요가있다.

/* SCSS */
$test1: 12;
$test2: 34;

.box{
  width: $test1 + $test2 + px;
}

.box2{
  width: #{$test1} + #{$test2} + px;
}


/* CSS */
.box{
  width: 46px;
}
.box2{
  width: 1234px;
}

위의 예시를 보면 확인할 수 있다.

.box1과 .box2 둘 다 $test1, $test2 변수를 사용했지만

css로 컴파일된 값은 천지차이가 난다.

보간법을 사용하지 않은 경우 $test1의 12와 $test2의 34가 연산이 되어 46이라는 값이 적용되고

보간법을 사용한 경우 $test1의 12와 $test2의 34가 단순 문자열로 인식되어 12와 34의 합성이 일어나 1234가 된다.

이처럼 보간법을 사용할 때,

내가 연산이 필요한건지 단순 문자열을 구현해야하는지 확인하고 작성할 필요가 있다.

sass-lang.com/documentation/interpolation

2020.03.19 - [Frontend/Sass (SCSS)] - [Sass 특징] Nesting (중첩)

Sass 문법을 사용하면서 가장 기본적으로 사용하는 속성이 nesting(중첩)이다.

그리고 nesting을 사용하면서 필수로 알아야할 것이 바로 Parent Selector(부모 선택자) 이다.

1. 부모 선택자(&)의 사용

- 부모 선택자는 특수문자 '&'을 사용한다.

- 기본적으로 중첩된 Sass 문법 안에서 사용한다.

- :hover, :checked, :not(&) 등의 가상클래스에 사용된다.

- :after, :before 등의 가상요소에 사용된다.

- 언더바(_), 하이픈(-) 등의 클래스명의 접속사에 사용한다.

등의 특징이 있다.

자세한 사항은 예시로 보면 이해가 쉽다.

/* SCSS */
.wrap{
  div{
    &:first-child{border: 1px solid #333;}
  }

  .box1{
    &:hover{
      text-decoration: underline;
      color: #fff000;
    }
    
    // .box1_inner
    &_inner{
      position: relative;
    }
  }
  
  :not(&){display: none;}
}


/* CSS */
.wrap div:first-child{border:1px solid #333;}
.wrap .box1:hover{text-decoration:underline; color:#fff000;}
.wrap .box1_inner{position:relative;}
not(.wrap){display:none;}

위 예시와 같이

.wrap div중 first-child에 특정 css를 적용하기 위해

.wrap div의 중첩 범위에 &을 사용하여 &:first-child를 적용 하였고

.wrap .box1:hover를 적용하기 위해 마찬가지로 &을 사용하여 적용하였다.

그리고 .box1뒤에 하이픈을 접속사로 사용하여 클래스명을 작성할때도 &을 사용하였다.

(.box1_inner)

not에 &를 넣어 &에 해당하는 영역에 css로 컴파일될 때

부모 요소인 .wrap을 넣어주는 방법도 위와같이 사용된다.

2. 부모선택자(&) 응용

위에서 설명한 가상선택자 및 하이픈(-), 언더바(_) 등의 클래스 등 기본적인 사용 방법 외에도

부모 선택자를 응용하여 사용할 수 있다. 

/* SCSS */
.wrap{
  .box{
    .outer_wrapper &{
      margin:0 auto; 
      width:1024px;
    }
  }
}


/* CSS */
.outer_wrapper .wrap .box{margin:0 auto; width:1024px;}

위 예시를 보면 분명 .wrap과 .box의 범위 안에

.outer_wrapper를 사용해서 값을 줬지만

막상 컴파일된 값은 .outer_wrapper이 가장 부모요소로 위치하게 된다.

그 이유는 바로 앞서 설명했듯 부모선택자(&)의 사용 때문이다.

.outer_wrapper 뒤에 부모선택자(&)를 사용하면 

부모에 있는 요소들이 해당 '&' 문자에 적용된다.

그렇기 때문에 .outer_wrapper이 가장 먼저 위치하게 되고

그 뒤에 .wrap과 .box가 차례대로 컴파일된다.

3. 부모선택자(&) 사용시 주의사항

위 2번에 설명한 내용을 염두하고 아래와 같은 소스를 작성하면

생각했던 css 내용으로 컴파일이 되지 않을 것이다.

/* SCSS */
.box{
  div&{
    background:skyblue;
  }
}

위와 같이 소스를 작성하면

내가 원하는 css 컴파일 내용은

div.box{background:skyblue;} 일 것이다.

하지만 컴파일 자체가 안되고 에러가 뜬다.

이유는 부모선택자(&)의 사용은 요소의 시작 부분에서만 사용할 수 있기 때문이다.

예를 들어 span&와 같이 특정 엘리먼트 뒤에 붙여서 사용이 불가능하고

span &처럼 & 앞에 특정 엘리먼트가 바로 붙어서 사용할 수 없다.

2020.03.27 - [Frontend/Sass (SCSS)] - [Sass 특징] @mixin 과 @include

예전에 포스팅한 @mixin과 @include에 대한 기본적인 내용과 더불어

@mixin과 @include 문법을 작성할 때,

빼놓을 수 없는 문법이 콘텐츠 블록(content block),

즉 @content 문법이다.

* @content 사용

@mixin을 통해 반복되는 css 내용들을 미리 등록해놓고 필요할때마다 사용할 때,

변동되는 값 들은 파라미터로 적용해서 필요에 따라 다른 값을 줄 수 있다.

/* SCSS */
@mixin common-box ($wsize:10px, $hsize:10px){
  &:after{
    display: block;
    content: '';
    border: 1px solid #333;
    width: $wsize;
    height: $hsize;
  }
}



.box1{
  @include common-box;
}

.box2{
  @include common-box($wsize:20px, $hsize:20px);
}


/* css로 컴파일 */
.box1:after {
  display:block; 
  content:''; 
  border:1px solid #333;
  width:10px; 
  height:10px;
}

.box2:after {
  display:block; 
  content:''; 
  border:1px solid #333; 
  width:20px; 
  height:20px;
}

위의 예시처럼 $wsize, $hsize의 파라미터 값으로 

.box1, .box2의 :after에 서로 다른 width, height 값을 적용한다.

하지만 위와 같이 단순 border, width, height 값 뿐만 아니라

.box2:after에만 background 값을 넣고 싶다면..?

/* SCSS */
@mixin common-box ($wsize:10px, $hsize:10px){
  &:after{
    display: block;
    content: '';
    border: 1px solid #333;
    width: $wsize;
    height: $hsize;
  }
}


.box2{
  @include common-box($wsize:20px, $hsize:20px);  // after에 대한 @include
  &:after{
    background: #f0f0f0;  // after에 대한 css 추가
  }
}


/* css로 컴파일 */
.box2:after {
  display:block; 
  content:''; 
  border:1px solid #333; 
  width:20px; 
  height:20px; 
  background:#f0f0f0;
}

위와 같이 .box2:after에 background 값을 따로 입력하는 방법이 있을 수 있겠지만

그렇게 되면 .box2에 @include한 값이 :after 속성인데

또 한번 &:after를 사용하여 css를 추가하게 되어

나중에 소스가 많아졌을 경우 문법을 한눈에 알아보는데 어려움이 있을 수 있다.

이럴 때 편하게 특정 요소에만 원하는 css를 추가할 수 있는 방법이

@content 이다.

/* SCSS */
@mixin common-box ($wsize:10px, $hsize:10px){
  display: block;
  content: '';
  border: 1px solid #333;
  width: $wsize;
  height: $hsize;
  
  @content;
}


.box2{
  @include common-box($wsize:20px, $hsize:20px){
    background:#f0f0f0;
  };
}


/* css로 컴파일 */
.box2:after {
  display:block; 
  content:''; 
  border:1px solid #333; 
  width:20px; 
  height:20px; 
  background:#f0f0f0;
}

위와 같이 @mixin 안에 @content; 라는 문법을 작성해놓으면

@include 믹스인명(...){
  *추가할 css 내용 작성
}

위 예시처럼 @include할 때 필요한 css를 바로바로 적용해 넣을 수 있다.

2020.03.29 - [Frontend/Javascript] - Javascript (자바스크립트) - 요소(Element) 찾기

자바스크립트의 요소 찾기와 다르게

제이쿼리의 경우엔 좀더 간단하게 요소를 찾을 수 있다.

1. 기본 셀렉터

위 요소를 사용하는 예시를 들자면 아래와 같다.

<div id="wrap">
  <div class="box">
    <p>예시용 설명글 입니다.</p>
  </div>
</div>

<script>
  var wrapper = $("#wrap");
  var box = $(".box");
  var paragraph = $("p");
  
  console.log(wrapper);  // <div class="wrap"> 반환
  console.log(box);  // <div class="box"> 반환
  console.log(paragraph);  // <p>예시용 설명글 입니다.</p> 반환
</script>

*사용시 주의사항

<div id="wrap">
  <div class="box">
    <p>예시용 설명글 입니다.</p>
  </div>
  <div class="box">
    <span>안녕</span>
  </div>
  <p class="dsc">안내사항을 전달 드립니다.</p>
</div>

<script>
  var wrapper = $("#wrap");
  var box = $(".box");
  var paragraph = $("p");
  
  console.log(wrapper);  // <div class="wrap"> 반환
  console.log(box);  // <div class="box"> 2영역을 배열 형식으로 반환
  console.log(paragraph);  // <p>예시용~</p>, <p class="dsc">안내사항을~</p> 2영역을 배열형식으로 반환
</script>

위와 같은 경우라고 했을 때

<div class="box">

  <span>안녕</span>

</div>

이라는 영역을 가져오고 싶어서

var box = $(".box") 를 사용하여 해당 요소를 찾았지만

<div class="box">

  <p>예시용 설명글 입니다.</p>

</div>

영역까지 같이 검색이된다.

그렇기 때문에 페이지에 하나만 존재하는 id값을 검색해서 사용하는 경우가 아니라면

클래스 검색, 태그 검색시 주의해야할 필요가 있다.

2. 특정 상황, 속성별 셀렉터

위의 예시들 처럼

css 작성할 때와 마찬가지로

특정 속성 및 상황별 선택자를 사용하면

제이쿼리에서 원하는 영역을 가져올 수 있다.

2021.03.20 - [Frontend/Web] - WAI-ARIA 접근성1. 주의사항 및 특징, 역할 (role)의 사용

이전 포스팅에서 WAI-ARIA의 기본적인 내용에 대해 알아봤다면

이번엔 자주 사용하는 ARIA 속성에 대해서 알아보려한다.

ARIA는 HTML요소에 접근 가능한 설명용 텍스트를 넣을 수 있다.

그 방법이 바로 ARIA의 속성 중 label과 관련된 속성을 사용하는 것이다. 

간단하게 설명을 먼저 하자면

aria-label은 화면에 현재 요소를 설명할 텍스트가 없을 경우에 사용하는 설명용 텍스트를 담고있고

aria-labelledby는 화면에 현재 요소를 설명할 텍스트가 있을 경우에 해당 텍스트 영역과 현재 요소를 연결할 때 사용한다.

1. aria-label

1-1. aria-label은 모든 html 태그에서 사용할 수 있다.

1-2. 이미지를 사용해 시각적 표현을 할 경우 대체 텍스트 역할을 한다.

일반적인 텍스트를 사용해서 영역을 표현하는 경우가 아닌

이미지를 통해 영역을 표현하는 경우 해당 영역이 어떤 영역인지 설명할 수 있는 요소가 있어야한다.

그런 설명하는 역할을 하는 속성이 바로 aria-label 속성이다.

<button class="bt_menu" aria-label="navigation menu"></button>

예를들어 햄버거 메뉴 버튼이 있다고 한다면

일반적인 사용자들의 경우 햄버거 메뉴 이미지를 보고 클릭을 하고 사용하겠지만

시각적으로 햄버거 메뉴 이미지를 확인할 수 없는 사용자들의 경우

해당 영역이 어떤 버튼인지 인지 할 수 없다. 그렇기 때문에

aria-label 속성을 사용해 해당 영역이 navigation menu 라는 정보를 담아준다.

1-3. 네이티브 텍스트와 aria-label과 같이 사용하게 되면 aria-label 속성에 작성한 정보를 사용한다.

위의 예시에서 사용한 버튼을 예로 들면

<button class="bt_menu" aria-label="navigation menu">네비용 버튼</button>

해당 소스와 같이 aria-label엔 'navigation menu'를

button 태그 안에는 '네비용 버튼' 이라는 텍스트를 넣었을 경우에

스크린리더로 정보를 불러올 때 aria-label에 담긴 'navigation menu' 값을 사용한다.

2. aria-labelledby

aria-labelledby는 맨 처음 aria-label을 설명하기 전에 설명했듯이

화면에 현재 요소를 설명할 텍스트가 있을 경우에 해당 텍스트 영역과 현재 요소를 연결할 때 사용한다.

위 이미지는 aria-labelledby에 대해 아주 잘 나타낸 예시이다.

<span id="rg-label">
  Drink options
</span>

<div role="radiogroup" aria-labelledby="rg-label">
  <div>
    <input type="radio" name="drink" id="drink1">
    <label for="drink1">Water</label>
  </div>
  <div>
    <input type="radio" name="drink" id="drink2">
    <label for="drink2">Tea</label>
  </div>
  <div>
    <input type="radio" name="drink" id="drink3">
    <label for="drink3">Coffee</label>
  </div>
  <div>
    <input type="radio" name="drink" id="drink4">
    <label for="drink4">Cola</label>
  </div>
  <div>
    <input type="radio" name="drink" id="drink5">
    <label for="drink5">Ginger Ale</label>
  </div>
</div>

위와 같은 소스로 작성했을 경우

Water ~ Ginger Ale 을 담고 있는 radiogroup 영역에 대한 설명용 텍스트가

해당 div 영역 밖인 <span id="rg-label">에 있기 때문에

해당 id 값과 radiogroup div의 aria-labelledby의 값을 일치 시켜줘서

radiogroup 영역이 어떤 요소들의 집합인지를 설명해줄 수 있다.

1-1. aria-labelledby는 모든 html 태그에서 사용할 수 있다.

1-2. aria-labelledby는 숨겨져 있는 요소도 참조할 수 있다. (display:none or visibility:hidden)

<!-- 
  display:none,
  visibility:hidden을 적용한 영역도 참조할 수 있다. 
-->
<span id="rg-label" style="display:none">
  Drink options
</span>

<div role="radiogroup" aria-labelledby="rg-label">
  <div>
    <input type="radio" name="drink" id="drink1">
    <label for="drink1">Water</label>
  </div>
  <div>
    <input type="radio" name="drink" id="drink2">
    <label for="drink2">Tea</label>
  </div>
  <div>
    <input type="radio" name="drink" id="drink3">
    <label for="drink3">Coffee</label>
  </div>
  <div>
    <input type="radio" name="drink" id="drink4">
    <label for="drink4">Cola</label>
  </div>
  <div>
    <input type="radio" name="drink" id="drink5">
    <label for="drink5">Ginger Ale</label>
  </div>
</div>

1-3. aria-labelledby와 네이티브 텍스트, aria-label과 함께 사용이 된다면 aria-labelledby에 있는 내용이 최우선된다.

<span id="labelledby-text">navigation menu1</span>
<button class="bt_menu" aria-label="navigation menu2" aria-labelledby="labelledby-text">
  navigation menu3
</button>

위와 같은 소스일 경우에

aria-labelledby의 경우 <span id="labelledby-text">navigation menu1</span>

aria-label의 경우 navigation menu2

네이티브 텍스트의 경우 navigation menu3의 값을 가지고 있는데

이처럼 3개의 내용이 동시에 적용될 경우

aria-labelledby 속성으로 정의한 내용이 최우선 된다.

developers.google.com/web/fundamentals/accessibility/semantics-aria/aria-labels-and-relationships?hl=ko

www.w3.org/TR/wai-aria-1.1

WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications)는

W3C에서 만든 기술로, WAI-ARIA 혹은 ARIA로 불린다.

1. WAI-ARIA 란?

마우스와 같은 포인팅 장비를 사용하기 힘든, 스크린 리더를 사용하는 사용자들에게 

동적 컨텐츠, javascript, ajax, vue, react 등과 같이 페이지를 새로고침 하지 않고도

페이지의 내용과 데이터가 바뀌는 영역에 역할, 속성, 상태 정보를 추가하여

동적인 컨텐츠에 보다 원활하게 접근하고

페이지에 접근성을 높여 여러 사용자들에게 원활한 페이지 이용을 도와준다.

(ex. 버튼을 클릭하여 페이지 새로고침이나 링크 이동으로 페이지가 전환되는 것이 아닌

컨텐츠 내용이나 구조가 바뀌는 상황에서 페이지 전환 상태나 정보를 WAI-ARIA로 알려준다.)

또한

WAI-ARIA는 단순 HTML로 표현할 수 없는 의미들을 태그에 부여하여 시각적인 불편함이 있는

사용자들게 일반적인 구조의 HTML에서 필요한 요소에 적절한 정보를 전달받아

원활하게 페이지 탐색 및 이용을 하도록 도와준다.

<li tabindex="0" class="checkbox" checked>
  Receive promotional offers
</li>

예를 들어 위와 같은 태그를 살펴 봤을 때

li태그에 .checkbox 클래스를 부여하여 css상으로 체크박스 형태의 모양을 만들어 사용할 경우

시각적 불편함이 없는 사용자들의 경우 css 화면을 보고 해당 영역이

체크박스임을 인지할 수 있지만 스크린리더로 화면을 탐색해야하는 사용자들의 경우

위의 css 정보를 얻을 수 없다. 

이때 스크린리더 사용자들을 위한 방법이 WAI-ARIA를 사용하는 것이다.

<li tabindex="0" class="checkbox" role="checkbox" checked aria-checked="true">
  Receive promotional offers
</li>

기존 소스와 다르게 role, aria-checked ARIA 속성을 사용하여

해당 영역이 체크박스인지, 체크가 되었는지 안되었는지 까지 명시할 수 있다.

2. WAI-ARIA 사용시 주의사항

- 올바르지 못한 ARIA를 사용할 바엔 ARIA를 사용하지 않는 편이 좋다.

스크린리더를 사용하여 페이지에 접근하는 경우 ARIA의 정보에 의지하게 되는데

바르지 못한 정보를 제공하게 되는 경우 스크린리더 사용자의 페이지 접근에 치명적인 영향을 주게된다.

ex)

<div role="button">주문하기</div>

예를 들어,

쇼핑몰에서 위의 소스처럼 div 영역을 버튼으로 사용하고 클릭시 주문이 되도록

소스를 작성했다고 했을 때, role="button"을 작성한다고 해서 실제 html 상에 키보드 포커싱이

일반 버튼처럼 역할을 주는 것은 아니다. (키보드로 해당 div가 접근이 안된다.)

키보드로 접근을 할 때, a, button과 같은 상호작용을 하는 태그가 아니라면 키보드로 해당 컨텐츠를

접근할 수 없다. 그렇기 때문에 위의 소스로 작성을 하게 된다면

키보드로 해당 div 영역을 접근할 수 있도록 처리를 해주거나 (강제로 tabindex 속성을 주거나 스크립트 처리)

버튼의 용도에 맞게 a, button 태그를 사용해야한다.

- ARIA를 사용하기 전에 태그의 역할과 의미에 맞게 작성한다.

html 태그는 각 태그별로 담당하고 있는 역할이 있다.

예를 들면 a태그는 상호작용과 링크 이동과 같은 역할을 button 태그는 말 그대로 버튼의 역할을...

이처럼 각 태그를 사용할 때 태그가 가지고 있는 역할에 맞게 사용한다면 불필요한 ARIA 속성을 줄이고

보다 접근성 향상에 도움을 줄 것이다.

<!-- X -->
<div role="button">버튼</div>

<!-- O -->
<button>버튼</button>

- 태그의 기본 의미를 중복해서 선언할 필요는 없다.

위의 내용들과 연관 지을 수 있는 내용인데

html의 각 태그에는 기본적으로 갖고 있는 역할과 의미가 있다.

그렇기 때문에 태그의 기본 속성에 덧붙여서 속성을 중복하여 정의할 필요 없다.

<!-- O -->
<input type="checkbox">
<button>버튼</button>
<fieldset>...</fieldset>
<ul>...</ul>

<!-- X (중복선언) -->
<input type="checkbox" role="checkbox">
<button role="button">버튼</button>
<fieldset role="group">...</fieldset>
<ul role="list">...</ul>

- 페이지에서 사용하는 태그의 역할이 잘못된 ARIA를 선언하면 안된다.

<!-- X -->
<button role="heading">버튼</button>

위의 예시처럼 button의 역할을 하는 태그에 heading이라는 역할을 주게 되면

접근성에 치명적 오류를 범하게된다.

3. 태그별 role(역할)

html 각 태그별로 암묵적으로 가지고 있는 role(역할)이 있다.

그리고 각 태그별로 적용할 수 있는 역할도 있다.

위의 표와 같이 각 태그는 기본적으로 가지고 있는 암묵적 role(역할)과

적용할 수 있는 role이 정해져 있다.

자세한 내용은 

www.w3.org/TR/html-aria/#docconformance

에서 확인할 수 있다.

또 각 role별로 필수 속성 및 지원이 가능한 속성도 별도로 있으니

www.w3.org/TR/html-aria/#case-sensitivity

에서 확인하면서 작업하면 도움이 될 것이다.

참고

www.w3.org/TR/html-aria

www.w3.org/TR/wai-aria-practices-1.1

developers.google.com/web/fundamentals/accessibility/semantics-aria?hl=ko

관련글)

2021.03.27 - [Frontend/Web] - WAI-ARIA 접근성2. 영역에 대한 설명, 레이블 (aria-label, aria-labelledby)

실무에서 css를 작성을 하다보면

간단한 페이지나 짧은 css 소스가 필요한 부분의 경우를 제외한

대규모의 페이지 및 여러명이 함께 작업을 해야할 경우의 페이지를 작업할 때에

각자 작성하는 마크업 방식이나 클래스 네이밍이 다르기 때문에

서로 작성해놓은 코드를 쉽게 알아보지 못해서

불필요한 소스가 생겨나고 유지보수에 어려움을 겪는 경우가 많아진다.

그렇기 때문에 css 방법론이 생겨났다.

css 방법론은 크게 SMACSS, BEM, OOCSS 3가지의 방법이 있는데

이 3가지는 각각 방법은 조금씩 다르지만

- 코드의 재사용성 높여 불필요하게 반복되는 css의 사용 최소화\

- 쉬운 유지보수

- 확장성 보장

- 의미있는 클래스명 사용을 통한 클래스명만으로 용도 파악

위 4가지의 형태를 추구하고자 한다.

1. SMACSS (Scalable and Modular Architecture for CSS)

SMACSS는 클래스명을 최대한 의미있게 사용하여 여러사람이 프로젝트를 진행해도

서로가 서로의 소스를 보다 쉽게 이해할 수 있도록 한다.

SMACSS는 5개의 규칙을 따른다.

1. Base (기본 규칙)

각 브라우저의 스타일 초기화를 위해

reset, normalize 등 페이지 전체에 기본 스타일을 적용한다.

이때, css !important는 사용하지 않는다.

2020.02.19 - [Frontend/CSS] - CSS Reset (초기화)

2. Layout (레이아웃 규칙)

- 페이지 큰 틀을 잡아주는 레이아웃과 관련된 스타일을 정의한다.

- header, footer, container, aside 등 주요 컴포넌트들과 그 하위 컴포넌트에 규칙을 적용한다.(nav, form...)

- 주요 컴포넌트는 #id, 하위 컴포넌트는 .class로 제어한다.

- 특정 상태에 따른 레이아웃을 변경하는 내용을 다루는 css 작성시 l- 혹은 layout- 클래스를 접두사로 붙인다.

#header{width:100%}
#footer{width:100%}

#header .nav{overflow:hidden;}
#footer .list{margin-top:5px;}

/* ex) fixed: 고정된 크기의 #header를 명시 */
.l-fixed #header{width:1200px;}

/* ex) flipped: floating된 .nav를 명시 */
.l-flipped #header .nav{float:left}

3. Module (모듈 규칙)

- 스타일 재사용을 위한 규칙 (버튼, 아이콘 등...)

- 재사용을 위해서 id 선택자, 태그(element) 선택자를 사용하지 않는다.

(단순 태그 선택자를 사용하게 된다면 .side_button > a 와 같이 '>' 직계자손 선택자를 사용한다.)

<style>
  .buttons{absolute; top:0; right:0}
  .buttons > a{display:block; border:1px solid blue;}
</style>

<div class="buttons">
  <a href="#">버튼</a>
</div>

4. State (상태 규칙)

- 요소의 상태에 따른 클래스 적용을 통한 변화 규칙

- 클래스 적용은 스크립트를 통해 (addClass) 특정 이벤트에 따라 적용한다.

- 클래스명은 주로 접두사 .is- 클래스 사용 (.is-on, .is-checked...)

<!-- 버튼 클릭 후 버튼이 on 되어있는 상태 -->
<div class="buttons is-on">
  <a href="#">버튼</a>
</div>

5. Theme (테마 규칙)

- 페이지 전체적인 테마색상에 대한 클래스를 적용하는 규칙

- 테마 적용을 위한 css를 별도로 분리하여 만들어 메인 css에 적용된 내용을 특정 테마에 따라 color값을 제어

- 주의 할 점은 메인 css 뒤에 테마용 css를 선언해야 한다는 점이다.

/* main.css */
.button{background:#fff;}

/* theme.css */
.button{background:skyblue;}

2. BEM (Block Element Modifier)

BEM은 클래스 사용을 각각 블록(block), 요소(element), 상태(modifier)로 구분하여 네이밍한다.

*장점

- 직관적인 클래스 사용을 통해 여러사람이 함께 작업을 진행하더라도 클래스를 알아보기 쉽게한다.

- 코드의 재사용성이 용이하다.

*단점

- 직관적인 클래스명을 사용하다보니 클래스명이 지나치게 길어져 복잡해지는 경우가 있다.

1. Block

- block의 속성을 가지고 재사용할 수 있는 독립적인 영역에 적용한다.

- block은 여백, 위치, 색상 등 상태에 대한 내용은 담지 않는다.

- 클래스명이 길어질 경우엔 하이픈(-) 으로 구분한다.

<!-- O -->
<div class="paging"></div>
<div class="btn-area"></div>

<!-- X -->
<!-- fixed, red와 같이 상태에 대한 내용은 클래스로 담지 않는다. -->
<div class="paging-fixed"></div>
<div class="btn-area-red"></div>

2. Element

- Block 안에 적용되는 내용들로 클래스명도 블록과 맥락이 이어져야한다.

- 클래스명은 언더바 2개(__) 로 작성한다.

<div class="button-area">
  <a href="#" class="button-area__button"></a>
  <span class="button-area__text"></span>
</div>

3. Modifiers

- block 혹은 element의 모양(color, size), 상태(position, disabled, checked)를 정의한다.

- 클래스명은 하이픈 2개(--)로 작성한다.

<div class="button">
  <div class="button__text">
    <span class="button__text--red"></span>
  </div>
</div>

3. OOCSS (Object Oriented CSS)

- css를 모듈 방식으로 적용해서 중복을 최소화 하는 것을 추구한다.

- id 선택자를 사용하지 않는다.

- 각 단어별 하이픈(-)으로 구분한다.

1. 구조와 외형을 분리

반복되는 기본 구조 및 외형과 관련된 내용을 공통 스타일화 하여 정의한다.

<style>
   /* 구조 스타일 */
  .button{width:100px; height:30px; text-align:center;}
  
  /* 외형 스타일 */
  .button-red{background:red; color:#fff;}
</style>

<a href="#" class="button button-red">버튼</a>

2. 컨텐츠와 컨테이너를 분리

- 어떤 요소(element)에 적용되어 있는게 중요한 것이 아니라 클래스를 적용한 컨텐츠 자체에 의미를 부여하고 사용한다.

- 태그가 변경되어도 적용한 클래스가 같다면 css를 바꿀 필요가 없다.

- 태그에 영향없이 클래스 자체에 스타일이 부여되기 때문에 재사용이 용이하다.

<h2 class="title"></h2>

<strong class="title"></strong>

위에 설명한 3가지의 css 방법론은 어디까지나 이러한 방법이 적용될 수 있다는 것을 의미한다.

반드시 해당 방법에 따라야 하는 것은 아니고 내가 작업하는 상황에 따라

해당 방법론들을 참고하여 나에게, 우리 팀에게 맞는 css 및 class 작성법을 연구하면

복잡한 페이지에서도 원활하게 작업할 수 있는 환경을 구축할 수 있을거라 생각한다.

참고

viaeoo.tistory.com/26#recentComments

wit.nts-corp.com/2015/04/16/3538

jmjmjm.tistory.com/44

figure 태그와 figcaption 태그는 html5에 들어서 추가된 태그이며

이미지, 삽화, 도표 등의 내용을 담는 태그이다.

1. figure 태그

figure 태그는 문서의 내용과 상관은 있지만

figure 태그가 제거 되거나 다른 곳으로 이동해도 문서의 내용에 영향을 주지 않아야 한다.

<figure>
  <img src="./icecream.jpg" alt="바닐라 아이스크림이 녹는 모습">
</figure>

태그의 사용은 기본적으로 figure 태그 안에 img태그를 넣어 사용한다.

2. figcaption 태그

figcaption 태그는 이전에 table 태그에 대해 다룰 때 사용했던 caption 태그와 유사하게

figure 태그 안에 있는 내용에 대한 설명을 나타낸다.

즉, table태그 안에 caption태그는 table 내용을 설명하고

figure태그 안에 figcaption태그는 figure 태그 안에 있는 내용을 설명한다.

2021/01/27 - [Frontend/HTML] - [html 태그] caption 태그 (table 태그, summary 속성)

<figure>
  <figcaption>바닐라 아이스크림</figcaption>
  <img src="./icecream.jpg" alt="바닐라 아이스크림이 녹는 모습">
</figure>

태그의 사용은 figure 태그 안에 사용하고

figure 태그 안에 제일 처음 혹은 제일 마지막 자식으로 위치할 수 있다.

[!] 여러개의 figcaption 태그가 들어가게 되면 가장 첫 번째 자식으로 오는 figcaption 태그의 설명을 사용한다.

참고

developer.mozilla.org/ko/docs/Web/HTML/Element/figure

2020/12/29 - [Frontend/HTML] - [html 태그] table 태그 (tr, th, td태그)

table태그를 사용하면서

해당 table 영역이 어떤 내용을 담고 있는지를 설명해줄 수 있는 태그가

바로 caption 태그이다.

1. summary 속성

caption 태그에 대해 설명을 하기 전에 먼저 알아야할 속성이 있다.

table 태그에 적용하는 속성인데,

해당 table이 어떤 내용을 담고 있는지 요약해주는 속성이다.

<table summary="1학년 3반 학생들의 과학, 수학 성적을 보여줍니다.">
  <caption>성적표</caption>
  <thead>
    <tr>
      <th>이름</th>
      <th>과목</th>
      <th>성적</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th rowspan="2" scope="col">철수</th>
      <td>과학</td>
      <td>60점</td>
    </tr>
    <tr>
      <td>수학</td>
      <td>90점</td>
    </tr>
    <tr>
      <th rowspan="2" scope="col">영희</th>
      <td>과학</td>
      <td>100점</td>
    </tr>
    <tr>
      <td>수학</td>
      <td>80점</td>
    </tr>
  </tbody>
</table>

위와 같이 해당 table이 1학년 3반 학생들의 성적을 담고 있다고

table 내의 내용을 요약해서 보여준다.

이처럼 유용하게 사용할 수 있는 속성이지만,

summary 속성은 html5에 들어서는 표준이 아닌 속성이 되었다.

2. caption 태그

caption 태그는 table 태그의 첫번째 자식 요소로 위치해야한다.

<table>
  <tr>
    <th>이름</th>
    <td>철수</td>
  </tr>
  <caption>학생 이름</caption>
</table>

*위와 같이 tr태그나 기타 다른 태그 뒤가 아닌 table태그 바로 아래에 위치해야한다.

caption 태그는 html5 이전에는

table의 제목만 간단하게 나타내는 태그였다.

하지만 html5 부터는 summary 속성이 비표준이 되면서

caption 태그가 table 내용의 간단한 요약 및 제목을 나타내는 태그가 되었다.

<table>
  <caption>성적표, 1학년 3반 학생들의 수학, 과학 성적을 보여줍니다.</caption>
  <thead>
    <tr>
      <th>이름</th>
      <th>과목</th>
      <th>성적</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th rowspan="2" scope="col">철수</th>
      <td>과학</td>
      <td>60점</td>
    </tr>
    <tr>
      <td>수학</td>
      <td>90점</td>
    </tr>
    <tr>
      <th rowspan="2" scope="col">영희</th>
      <td>과학</td>
      <td>100점</td>
    </tr>
    <tr>
      <td>수학</td>
      <td>80점</td>
    </tr>
  </tbody>
</table>

예전에는 table 태그를 레이아웃을 구축하는 용도로 많이 사용했지만

요즘엔 table 태그는 단순한 테이블 영역을 위해 사용된다.

1. table 태그의 기본 구조

table 태그는 단독으로 사용되진 않는다.

자식 요소로 thead, tbody, colgroup, caption, tr, th, td 등의 여러 태그들과 함께 쓰인다.

가장 기본적인 구조는 하나 이상의 tr, th, td 태그들과 함께 구성이 된다.

<table>
  <tr>
     <th>과목</th>
     <th>점수</th>
  </tr>
  <tr>
     <td>수학</td>
     <td>국어</td>
  </tr>
  <tr>
     <td>100점</td>
     <td>80점</td>
  </tr>
</table>

위의 소스는 가장 기본적인 구조인 tr, th, td 태그만 사용해서 적용한 모습이다.

<table>
  <thead>
     <tr>
       <th>과목</th>
       <th>점수</th>
     </tr>
  </thead>
  <tbody>
    <tr>
       <td>수학</td>
       <td>100점</td>
    </tr>
    <tr>
       <td>국어</td>
       <td>80점</td>
    </tr>
  </tbody>
</table>

위와 같은 소스라면 thead 영역에 tbody의 각 영역들에 대한 제목을

tbody 영역에는 thead의 제목에 대한 정보나 데이터가 노출될 수 있도록 한다.

2. tr 태그

tr태그는 table 태그에서 필수요소이며 th, td로 이루어져 있고

하나의 행(row)을 나타낸다.

즉, tr이 사용되면 tr 안에 있는 요소들은 하나의 행으로 처리가 된다.

3. th 태그

th는 테이블에서 요소별 제목을 나타낸다.

<table>
  <tr>
    <th>이름</th>
    <td>철수</td>
  </tr>
</table>

위의 소스에서 본다면 이름 : 철수가 노출되는 테이블에서

해당 행의 제목은 '이름' 이라는 정보이며 제목에 대한 데이터는 '철수' 라는 것을 알 수 있다.

주로 사용하는 속성은 rowspan, colspan, scope 등이 있다.

3-1. rowspan : 행 병합

<table>
  <tr>
    <th rowspan="2">이름</th>
    <td>철수</td>
  </tr>
  <tr>
    <td>영희</td>
  </tr>
</table>

3-2. colspan : 열 병합

<table>
  <tr>
    <th colspan="2">이름</th>
  </tr>
  <tr>
    <td>철수</td>
    <td>영희</td>
  </tr>
</table>

3-3. scope : th에서만 사용할 수 있는 속성으로 해당 th가 어떤 데이터와 연결이 되고 있는지 명시할 수 있다.

<table>
  <tr>
    <th scope="col">이름</th>
    <th scope="col">나이</th>
  </tr>
  <tr>
    <td>철수</td>
    <td>10살</td>
  </tr>
  <tr>
    <td>영희</td>
    <td>11살</td>
  </tr>
</table>

위의 경우 이름, 나이 라는 제목이 각각

이름은 철수, 영희가 포함된 열을

나이는 10살, 11살이 포함된 열의 제목으로 존재한다는 것을 명시한다.

scope 속성은 화면상 드러나는 시각적 효과는 없지만 스크린 리더와 같은 장치에서 데이터를 읽을 때 활용이 된다.

4. td 태그

th태그에서 정의한 제목 영역에 대한 데이터 및 정보를 나타낸다.

주로 사용하는 속성은 th와 비슷하게 colspan, rowspan 등을 사용하고

th와는 다르게 scope 속성은 사용할 수 없다. (html5 이전에는 사용할 수 있었다고 한다.)

최신 스펙의 css값을 사용할 때

해당 css를 제공하는 브라우저에 따라 맞춤형으로 적용할 수 있게

css를 선언할 수 있다.

방법은 바로 @supports 문법(기능 쿼리, feature query)을 이용하는 것이다.

1. @supports 의 사용

@supports 문법은 미디어 쿼리 문법을 사용하는 것과 유사하다.

@supports (display:flex) {
  .contents{display:flex; margin:0 5px; align-items:center; justify-content:space-between;}
  .contents div{flex-grow:1;}
}

@supports not (display:flex) {
  .contents{overflow:hidden;}
  .contents div{float:left; margin:0 5px;}
}

css 입력 영역에 @supports (조건) { 적용할 css내용 } 을 입력하면 된다.

위의 문법을 예시로 보면 display:flex 를 지원하는 브라우저에서는

.contents에 display:flex; margin:0 5px; align-items:center; justify-content:space-between;

.contents div 에 flex-grow:1 속성을 적용시키고

display:flex를 지원하지 않는 브라우저에서는

.contents에 overflow:hidden

.contents div에 float:left; margin:0 5px; 의 값을 적용시키게 한다는 내용이다.

이처럼 특정 css 속성이 지원하거나 지원하지 않는 상황에 따라

css값을 달리 적용할 수 있다.

2. @supports 의 응용

기본적으로 한 가지의 특정 css의 지원/미지원에 따른 css 적용 뿐만 아니라

and, or 같은 연산자를 사용해 특정 상황에 따른 css 적용 조건을 만들 수 있다.

1. and 연산자 : and를 기점으로 작성한 조건의 css가 모두 참일 경우 관련 css 값을 적용한다.

@supports (display:table) and (display:table-cell){
  .list{display:table;}
  .list li{display:table-cell;}
}

display:table과 display:table-cell을 동시에 지원하는 브라우저에서

.list와 .list li 에 입력한 css가 적용된다.

2. or 연산자 : or를 기점으로 둘 중 혹은 여러 개 중 하나라도 참일 경우 관련 css 값을 적용한다.

@supports (transform:rotate(45deg)) or (-webkit-transform:rotate(45deg)){
  .box{transform:rotate(45deg);}
}

transform:rotate(45deg) 나 -webkit-transform:rotate(45deg)의 css 중 하나라도 브라우저에서

지원을 하게된다면 .box에 입력한 css 가 적용된다.

3. @supports의 selector() 적용

브라우저에서 특정 선택자를 지원하는지도 @supports 문법을 통해 분별하고 스타일을 적용할 수 있다.

@supports selector(A > B){
  .contents > .box {background:#000;}
}

직계 자손 선택자 (>) 를 지원하는 브라우저일 경우에

.contents > .box에 입력한 css를 적용할 수 있게 만든다.

[!] selector() 를 사용할 때는 selector 문법 뒤에 띄어 쓰기 없이 selector(선택자 조건)을 입력한다.

selector (A ~ B){}   ---- X
selector(A ~ B){}    ---- O

developer.mozilla.org/ko/docs/Web/CSS/@supports

css를 이용해 position 값을 사용하다보면

주로 사용하는 position 값은 static, relative, absolute, fixed

이 4가지가 될 것이다.

그도 그럴것이 이번에 소개할 position 값인 sticky의 경우엔

IE(익스플로어)에선 아예 지원을 하지 않는 속성이기 때문에

평소에 사용하는데에 어려움이 있었다.

하지만 이젠 IE의 점유율이 줄어들어 IE를 고려하지 않는 작업이 많아지고

모바일 작업을 중점으로 하는 경우도 많기 때문에

position : sticky 에 대해 알아두면 좋을 것 같아서 포스팅 하게 되었다.

1. position : sticky 의 개념

sticky 라는 단어의 뜻에서 알 수 있듯이

sticky 속성값을 선언한 영역의 위치값을 고정시켜주는 역할을 한다.

백번의 설명보다 한 번의 예시가 더 도움이 될 것이다.

<style>
  .wrap{height:500px; overflow:hidden; overflow-y:scroll;}
  .inner{height:200px; background:skyblue;}
  .box{position:sticky; top:10px; left:10px; width:50px; height:50px; background:#000;}
</style>
<body>
  <div class="wrap">
    <div class="inner">
      <div class="box"></div>
    </div>
  </div>
</body>

위의 소스를 출력했다고 가정했을 때 아래와 같이 검은색 상자모양의 영역이 스크롤할 때에

고정이 되어 노출되는 것을 알 수 있다.

[!] 주의할 점은 position : sticky 를 사용하면 top, left와 같은 위치값을 반드시 작성해줘야 sticky 속성을 적용할 수 있다.

2. position : fixed와 position : sticky의 차이와 특징

위의 예시만 봤을 때 들 수 있는 생각은 fixed 속성과 sticky 가 뭐가 다르지? 라는

의문이 생길 수 있다.

아래의 예시를 보면 sticky의 특징을 더 잘 살펴봄과 동시에 fixed와의

차이점도 이해할 수 있다.

<style>
  .wrap{height:500px; overflow:hidden; overflow-y:scroll;}
  .inner{height:100px; background:skyblue;}
  .inner2{height:100px; background:#0f9d58;}
  .box{position:sticky; top:10px; left:10px; width:50px; height:50px; background:#000;}
</style>
<body>
  <div class="wrap">
    <div class="inner">
      <div class="box"></div>
    </div>
    <div class="inner2"></div>
  </div>
</body>

스크롤의 위치가 sticky 처리를 한 검은색 박스 영역의 부모 요소인

.inner 영역을 벗어나고 .inner2 영역으로 스크롤이 넘어가자

.box 영역은 더 이상 스크롤을 따라오지 않고 .inner 영역 끝 부분에 걸리게 된다.

즉 sticky 속성은 sticky 선언한 영역의 부모 요소 안에서만

고정되어 스크롤에 따라 움직이게 된다는 것을 알 수 있다.

그렇기 때문에 fixed와도 확연히 다르다는 것을 알 수 있다.

페이지 전체 영역을 기준으로 고정이 되는 fixed와 다르게

sticky의 경우는 부모요소를 기준으로만 움직이기 때문이다.

제이쿼리는 자바스크립트로 만든 자바스크립트 라이브러리다.

즉, 자바스크립트의 사용을 더 쉽게 하기위해 만든 문법이라고 생각할 수 있다.

기본적인 문법의 기초는 자바스크립트를 기반으로 만든 것이기 때문에

일반 *바닐라 스크립트와 동일하지만

사용하는 명령어나 함수가 다르다.

*바닐라 스크립트 : 다른 라이브러리를 사용하지 않고 순수한 일반 자바스크립트 문법을 말한다.

예를들면,

원하는 요소를 찾을 때

바닐라 자바스크립트의 경우 원하는 아이디 값의 요소를 찾는다고하면

document.getElementById('아이디값') 으로 검색을 하거나 document.querySelector('#아이디값')으로 검색을 할 수 있다.

하지만 제이쿼리의 경우

$('#아이디값') 이라는 명령어를 통해 바로 원하는 아이디 값을 찾을 수 있다.

<div id="wrapper">
  <ul class="list">
    <li></li>
    <li></li>
  </ul>
</div>

<script>
  // 바닐라 스크립트 문법
  var wrapper = document.getElementById('wrap');  // #wrapper 찾기
  var listWrap = wrapper.getElementsByClassName('list')[0];  // #wrapper .list 찾기
  var lists = listsWrap.getElementsByTagName('li');  // #wrapper .list li 찾기
  
  // 제이쿼리 문법
  var wrapper2 = $('#wrapper');  // #wrapper 찾기
  var listWrap2 = $('#wrapper .list')  // #wrapper .list 찾기
  var lists = $('#wrapper .list li')  // #wrapper .list li 찾기
</script>

위와 같은 원하는 요소를 찾은 경우 외에도

제이쿼리 문법은 바닐라 스크립트로 작성해야 할 문법의 양을 훨씬 줄여서 작성할 수 있기 때문에

편리하게 사용할 수 있다.

그렇지만 앞서 말했듯이 기본적인 문법의 구조는 바닐라 스크립트이기 때문에

기본적인 바닐라 스크립트의 공부가 되어있지 않은 상태에서

제이쿼리 문법과 명령어만 외워서 사용하는 것은 지양하는 것이 좋다.

특히나 SPA(Single Page Application)의 활용이 높아지면서 Vue, React 등의 라이브러리가 많이 사용이 되는데

해당 라이브러리에선 제이쿼리 문법을 사용하지 않고 주로 바닐라 스크립트로 작성해야 하는 일이 많기 때문에

바닐라 스크립트를 위주로 공부하고 그 내용들을 바탕으로 제이쿼리를 공부하면

훨씬 더 금방 제이쿼리에 대해 이해하고 접근할 수 있을 것이다.

모바일 페이지 작업을 할 때 크롬 모바일 모드나 일반적인 디바이스에서는

문제없이 노출되던 텍스트들이

특정 디바이스 화면(몇몇 아이폰)에서 유독 크게 보이는 경우가 발생할 때가 있다.

이러한 경우 영역이 깨지거나 원하는 페이지를 표현하는데에 어려움이 생긴다.

이럴 때 사용하는 속성이 text-size-adjust 라는 css 속성이다.

text-size-adjust는 비표준 속성이므로 벤더 프리픽스를 사용해야한다.

1. text-size-adjust : none

default 속성(기본값)으로 화면의 크기에 따라 크기를 조정하지 않음을 명시한다.

2. text-size-adjust : auto

화면의 크기에 따라 크기를 자동으로 조정할 수 있게 한다.

(디바이스마다 그 크기가 달라질 수 있기 때문에 되도록 사용하지 않는다.)

3. text-size-adjust : % (퍼센트)

특정 퍼센트(%) 값을 줘서 크기를 조정한다.

100%의 값을 줘서 모든 디바이스에서 동일한 텍스트 크기를 만들 수도 있고

퍼센트 값을 낮게줘서 디바이스별로 동일하게 작게 줄 수도 있다.

사용하는 예시는 아래와 같다.

html, body{
  -webkit-text-size-adjust : none;  /* 크롬, 사파리, 오페라 신버전 */
  -ms-text-size-adjust : none;  /* IE */
  -moz-text-size-adjust : none;  /* 파이어폭스 */
  -o-text-size-adjust : none;  /* 오페라 구버전 */
}

주로 실무를 하면서 많이 사용했던 방법은

위의 소스와 같이 text-size-adjust : none 값을 선언하거나 100% 값을 주는 방법이다.

none의 경우 기본값이긴 하지만 특정 디바이스의 경우엔 해당 값이 무시되러 렌더링 되는 경우가

있기 때문에 한번 더 적용을 시킨다.

많이 사용하진 않지만 많이 사용하지 않기 때문에 놓치기 쉬운 css가 있다.

그 중 하나가 user-select 라는 속성인데

이 속성은 텍스트를 선택했을 때의 동작을 설정할 수 있는 속성이다.

* IE 작업시 IE9+ 부터 -ms- 프리픽스 적용 후 사용

1. user-select : auto (default)

기본 값은 auto로 텍스트를 더블클릭 혹은 드래그할 경우 선택된다.

2. user-select : none

none의 경우 텍스트 영역이 클릭 및 드래그로 선택되지 않는다.

3. user-select : all

all은 단순 클릭 한 번만으로 텍스트 영역이 선택된다.

4. user-select : text

기본 값인 auto와 동일하게 텍스트를 더블클릭, 드래그로 선택할 수 있다.

(기본적으로 auto 값과 동일하게 생각하면 된다.)

2020/03/29 - [Frontend/Javascript] - Javascript (자바스크립트) - 요소(Element) 찾기

이전에 아이디, 클래스, 태그 등을 이용해

getElementById, getElementsByClassName, getElementsByTagName 의 명령어 사용과 함께

요소를 찾는 방법을 알아봤다.

이러한 방법 외에 제이쿼리와 유사하게 .(클래스), #(아이디) 와 같이 . # 를 이용해서 원하는 요소를

찾는 방법이 있다.

1. querySelector()

원하는 요소를 아이디(#), 클래스(.), 태그 값을 입력해서 하나만 찾는다.

(리스트나 반복되는 영역에서 해당 명령어를 사용하게 되면 가장 첫번째로 있는 DOM 요소를 찾는다.)

<div id="wrap">
  <ul>
    <li>리스트 1</li>
    <li>리스트 2</li>
    <li>리스트 3</li>
  </ul>
</div>

<script>
  var wrapper = document.querySelector('#wrap');
  var lists = wrapper.querySelector('li');
  
  console.log(wrapper);  // <div id="wrap"> 영역을 찾는다.
  console.log(lists);  // #wrap 하위에 있는 첫 번째 li를 찾는다.
</script>

2. querySelectorAll()

원하는 요소를 아이디(#), 클래스(.), 태그 값을 입력해서 여러 요소들을

Nodelist (유사배열)의 형태로 가져온다.

<div id="wrap">
  <ul>
    <li>리스트 1</li>
    <li>리스트 2</li>
    <li>리스트 3</li>
  </ul>
</div>

<script>
  var wrapper = document.querySelector('#wrap');
  var lists = wrapper.querySelectorAll('li');
  
  console.log(wrapper);  // <div id="wrap"> 영역을 찾는다.
  console.log(lists);  // #wrap 하위에 있는 모든 li를 유사 배열 형태로 가져온다.
  
  // lists → [<li>리스트 1</li>, <li>리스트 2</li>, <li>리스트 3</li>]
</script>

마크업 작업을 하다보면 크롬과 같은 주로 사용하는 브라우저에서 확인을 하다가

IE (Internet Explorer) 나 Firefox 와 같은 다른 브라우저에서 확인할 때

레이아웃이 틀어지거나 원하지 않는 화면이 표시되는 것을 볼 수 있다.

이는, 각 브라우저가 가지고 있는 렌더링 엔진이 다르기 때문이다.

이렇듯 한 브라우저에서 적용된 소스의 내용이 모든 브라우저에

동일하게 적용될 수 없는데 이렇게 각 브라우저들을 맞추기 위한 작업을

크로스 브라우징이라 한다.

이러한 크로스 브라우징을 하기 위해선 몇 가지 방법이 필요하다.

1.  Reset CSS

각 브라우저별로 태그마다 주는 속성이나 속성 값들이 다 다른데

이러한 것들을 맞추기 위해 우리는 css를 초기화 해줄 필요가 있다.

즉, 모든 태그들을 동일한 조건에서 시작할 수 있게 해준다.

(ex. 각 태그별 margin, padding 0으로 초기화, ol, ul태그 list-style 초기화...)

자세한 내용은 이전에 포스팅한 Reset.css 를 참고 하면 된다.

2020/02/19 - [Frontend/CSS] - CSS Reset (초기화)

2. 브라우저별  적용되지 않는 css 속성 찾기

우리가 크로스 브라우징을 할 때, 

가장 문제가 되는 브라우저는 뭐니뭐니해도 IE(Internet Explorer)일 것이다.

IE의 경우는 최신 버전이 아닌 IE8, IE9 버전 등 하위 브라우저의 경우

지원하지 않는 속성이 많이 있기 때문이다.

그렇기 때문에 

can I use 와 같이 브라우저별로 지원하는 css를 찾아보고 작업하는 것이 중요하다.

caniuse.com

예를 들어 프로젝트에서 IE8 이상부터 지원하게 작업해야 한다면

transition (IE10+), transform(IE9+) 와 같은 IE8보다 상위 브라우저 부터 지원하는

css는 사용할 수 없을 것이다. 

그렇기 때문에 스크립트나 이미지 파일을 사용해서 해당 기능들을 구현하는 것이

크로스 브라우징을 위해 좋은 방법으로 이용될 것이다.

웹 페이지 작업을 하면서 input태그는 뺄 수 없는 요소이다.

텍스트, 비밀번호, 체크박스, 버튼 등 여러가지 다양한 용도로 사용할 수 있다.

1. input 태그의 사용 (with. label)

기본적으로 input 태그는 닫기 태그가 없는 독립적인 태그이다.

<input type="타입">

html5 이전엔 input 태그 안에 닫기를 추가해줘야 했지만 이제는 생략해도 된다.

<input type="타입" />

그리고 input 태그는 label 태그와 주로 같이 사용이 되는데

label 태그와 input 태그를 연결 시켜준다.

(label의 for="" 와 input의 id 값)

<label for="inputName">이름 :</label>
<input type="text" id="inputName">

위의 태그와 같이 적용을 하게 되면

이름 : 영역을 클릭하게 되면 input 입력 영역이 포커스 된다.

그리고 웹접근성 측면으로 봤을 때도 해당 input 태그가 이름을 입력하는

input 인 것을 알려주는 역할을 할 수 있다.

예시)

type이 text인 경우 외에도 radio나 checkbox인 경우의 예를 들자면

<h3>성별</h3>
<ul>
   <li>
      <label>
         <input type="radio" name="gender">
         남성
      </label>
   </li>
   <li>
      <label>
         <input type="radio" name="gender">
         여성
      </label>
   </li>
</ul>

label에 for값과 input의 id값을 사용하지 않아도

label 태그 안에 input을 넣어서 해당 input이 label 태그 안에 있는 텍스트인 각 성별에 해당하는 것을 표시할 수 있다.

그리고 radio나 checkbox 의 경우 input에 name 속성을 서로 같게 맞춰줘서

연관이 있는 input임을 명시해주고 사용한다.

2. input 태그 type 속성

input 태그에서 가장 중요한 것이 속성이다.

가장 중요하게 알아둬야 할 속성은 type이다.

해당 input 요소가 어떤 역할을 할 것인지를 결정한다.

*html5 이후에 추가된 type 속성

html5에 추가 된 속성 값 같은 경우는

브라우저별로 적용이 안되는 경우도 있기 때문에

사용시에 크로스브라우징에 신경을 써서 작업이 필요하다.

참고

https://aboooks.tistory.com/295

css로 원하는 영역에 테두리 효과를 주고싶을 때

border 속성을 사용한다.

1. border 속성의 특징

<style>
   .box {border:3px solid #333; background:yellow; width:300px; height:300px;}
</style>
<body>
   <div class="box"></div>
</body>

위와 같이 border 속성은 원하는 영역에 테두리 효과를 줄 수 있다.

border로 준 테두리는 실제 영역의 너비나 높이 값에 영향을 주게 되는데

위 예시의 경우 css로는 가로 300px, 세로 300px 의 값을 줬지만

실제 크기는 상하좌우 border 3px이 포함되어

총 너비는 가로 306px, 세로 306px이 된다.

2. border 속성의 사용

border는 margin, padding과 같이 상하좌우로 적용할 수 있고,

축약형으로도 사용이 가능하다.

ex) border-right: 1px solid #333 (우측에만 적용)  /  border:1px solid #333 (상하좌우에 적용)

뿐만 아니라

border는 1px solid #000 과 같이 한번에 속성들을 사용하는 것과 더불어

border-width, border-style, border-color 와 같이 각각의 사용도 가능하다.

border-width는 축약형과 마찬가지로
border-width: 1px 0  혹은  border-width: 1px 0 3px 1px 와 같이 사용할 수 있다.

border-width: 2px; (테두리 두께)

border-style: dashed; (테두리 스타일 - solid, dashed, dotted 등 여러 스타일이 있다.)

border-color: red (테두리 색상)

↓

border: 2px dashed red (축약형)

html5에 새롭게 시맨틱한 마크업을 위해 추가 된 태그 중

특정 영역을 감싸는 용도로 사용하는 section, article 태그가 추가 되었다.

1. section 태그

section 태그는 주제별 영역들을 그룹화 하기위해 사용한다.

주로 자식 요소로 hn태그 (h1~h6) 태그와 일반적인 컨텐츠가 포함된다.

<section>
   <h1>상품소개</h1>
   <ul>
      <li>상품1</li>
      <li>상품2</li>
      <li>상품3</li>
   </ul>
   <p>상품의 실제이미지와 다를 수 있습니다.</p>
</section>

2. article 태그 (section 태그와 비교)

aricle 태그는 section과 마찬가지로 특정한 영역을 그룹화할 때 사용한다.

하지만 section 태그와는 다르게 article 태그는

해당 페이지에서 다른 페이지나 다른 영역에 언제든지 독립적으로 갖다 붙힐 수 있는 영역을 그룹화한다.

예를 들면

- 블로그 및 SNS 영역

- 뉴스 기사

- 신문 논평

등에서 사용한다.

<article>
   <h3>브랜드 페이스북</h3>
   <ul>
      <li>포스팅1</li>
      <li>포스팅2</li>
      <li>포스팅3</li>
   </ul>
</article>

즉, section은 영역을 감싸거나 구분할 때,

article은 영역을 나누지만 언제든 그 영역이 다른 페이지나 영역에 가져다 쓸 수 있는 것

margin과 비슷하게 padding은 간격을 조정할 때 주로 사용한다.

1. padding의 특징 (margin과 비교)

padding과 margin은 영역의 간격을 조정할 때 사용한다는 공통점이 있다.

하지만, padding은 margin과 다르게 padding의 값이 영역의 너비나 높이에 영향을 준 다는 점이 큰 차이점이라고 말할 수 있다.

<style>
  .box{padding:0 20px; width:200px; height:200px; background:skyblue;}
</style>
<body>
  <div class="box"></div>
</body>

위의 예시에서 확인할 수 있듯 padding값은 영역의 너비, 높이에 영향을 끼친다.

2. padding 값

padding은 margin과 마찬가지로

padding-top, padding-right, padding-bottom, padding-left 등의 세부 속성으로 사용할 수 있고,

padding: 0(위)  0(오른쪽)  0(아래)  0(왼쪽) 과 같이 축약형으로도 사용할 수 있다.

(축약형의 경우 위, 오른쪽, 아래, 왼쪽의 순서로 값을 적용한다.)

마크업을 하면서 기본적인 요소들간의 간격을 위해서 margin값을 많이 사용한다.

단순한 간격을 비롯해 원한다면 특정 요소를 가운데로 정렬할 수도 있다.

1. margin 속성의 사용

margin값은 단순한 간격을 조정하는데에 가장 많이 사용한다.

특히 padding이나 border와는 다르게 영역의 너비나 높이 값에 영향을 주지 않는다.

width 200px, height 200px 의 영역이 있다고 했을 때

해당 영역에 padding:20px 을 적용할 때와 margin:20px 을 적용할 때의 너비, 높이는 다르다.

먼저, padding을 적용할 경우 width:240px, height:240px의 값을 갖게 되고

margin을 적용할 경우 width:200px, height:200px의 값을 그대로 갖게 된다.

2. margin 값

margin 속성은 상 하 좌 우 내가 원하는 요소에 값을 줄 수 있다.

<style>
  .box1{margin-top:5px;}
  .box2{margin-right:10px;}
  .box3{margin:5px 10px 0 0;}  /* 축약형 사용 */
</style>

margin-top, margin-right, margin-bottom, margin-left를 통해 원하는 방향에 원하는 값을 각각 줄 수도 있고,

margin: 0(위)  0(오른쪽)  0(아래)  0(왼쪽)와 같이 축약형을 사용해서 원하는 값을 한 번에 줄 수 있다.

(축약형의 경우 위, 오른쪽, 아래, 왼쪽의 순서로 값을 적용한다.)

3. margin 정렬 (auto)

margin을 사용해서 특정한 영역을 가운대로 정렬할 수 있다.

바로 margin의 auto값을 이용한 방법이다.

<style>
  .box{margin:0 auto; width:400px; height:200px; background:skyblue;}
</style>
<body>
  <div class="box"></div>
</body>

위와 같이 소스를 적용했을 때 

예시와 같이 특정 영역이 가운데 정렬한 모습을 볼 수 있다.

위와 같이 auto값을 사용할 때, 주의할 점이 있다.

너비 값(width)을 지정 해주지 않으면 가운데 정렬을 할 수 없다는 점이다.

처음 css에 대해 배울 때 많이 헷갈리는 요소중에 하나가

border, padding 값이 포함된 영역의 너비, 높이 값을 정하는 작업이다.

1. 너비, 높이 값에 포함되는 속성

내가 원하는 너비와 높이 값을 지정을 했지만 개발자 도구나

실제 너비, 높이 값을 측정했을 때, 내가 지정한 값보다 너 크게 잡히는 경우가 있을 것이다.

이 경우 border, padding 값을 확인해봐야 한다.

<style>
  .box{width:200px; height:200px; background:skyblue;}
</style>
<body>
  <div class="box"></div>
</body>

위와 같은 코드인 경우 너비 200px, 높이 200px의 네모난 상자가 만들어 진다.

<style>
  .box{border:4px solid blue; padding:0 20px; width:200px; height:200px; background:skyblue;}
</style>
<body>
  <div class="box"></div>
</body>

하지만 위의 소스와 같이 border, padding 값이 들어간다면 값은 달라진다.

위의 이미지와 같이 기본 200px의 너비에 양쪽 border값 8px + 양쪽 padding 값 40px이 포함되어

너비는 248px이 된다.

높이 또한 기본 200px에 위 아래 border 8px 을 포함해 208px이 된다.

2. box-sizing의 사용

위와 같이 border, padding 값이 들어가게 되면 높이와 너비를 내가 원하는대로 맞추기가 어려워 진다.

실제로 너비 200px을 만들기 위해서는 padding, border 값을 뺀 기본 너비값을 입력을 해야한다.

예시와 같은 경우 200px - 8px(양쪽 border) - 40px(양쪽 padding) = 152px의 너비를 기본 너비값으로

css에서 정의를 해야한다.

하지만 box-sizing 속성을 사용하게 되면 border, paddding 값을 통해 일일이 너비 값을 계산하지 않아도 된다.

<style>
  .box{
    border:4px solid blue; 
    padding:0 20px; 
    width:200px; 
    height:200px; 
    background:skyblue; 
    box-sizing:border-box;
  }
</style>
<body>
  <div class="box"></div>
</body>

위와 같이 box-sizing:border-box 라는 값을 입력하면

내가 굳이 계산하지 않아도 200px을 width값으로 적용하면 border, padding 값을 계산해서

기본 너비값을 152px로 계산해준다.

3. box-sizing 속성

- content-box

box-sizing의 기본 값으로 너비나 높이 값에 border, padding의 값을 더해서 포함해 계산한다.

(width:100px; height:100px; padding:10px; box-sizing:content-box → width:120px, height:120px)

- border-box

너비나 높이 값에 border, padding값을 포함시키지 않고 기본 너비 값을 적용한다.

(width:100px; height:100px; padding:10px; box-sizing:boder-box → width:100px, height:100px)

마크업을 하다보면 a태그와 button태그의 차이와

어떤 부분에 a태그를 쓰고 또 어떤 부분에 button 태그를 써야하는지

기준이 헷갈리는 경우가 있다.

확실한 태그의 사용을 위해 연구가 필요하다.

a태그가 페이지의 이동, 페이지 내의 이동과 같은 상호작용의 역할을 한다면

button 태그는 클릭 이벤트와 같은 단순 클릭과 이벤트의 용도로 사용된다.

1. button 태그의 역할

button 태그의 역할에 대해 자세히 설명하기 위해 a태그와의 비교를 통한 설명이 필요할 것 같다.

- a태그

페이지의 이동, 페이지 내의 다른 영역으로의 이동 등 상호작용이 필요할 경우 사용된다.

- button태그

단순 클릭 이벤트, form요소에 입력된 내용을 서버로 전송할 때 사용된다.

2. button 태그 속성

button 태그의 주요 속성에 대해 알아본다.

위의 속성 외에 formaction, formenctype, formmethod, formnovalidate, formtarget, name 등의 속성이 있다....

<address> 태그는 가까운 HTML 요소의 사람, 단체, 조직 등의 연락처 정보를 나타내는 태그이다.

1. address 태그의 표현

address 태그는 어느 요소(태그) 안에 사용이 되느냐에 따라

나타내는 정보가 조금씩 다르다.

보통은 <footer> 영역 안에 사용이 되는데,

그 경우 문서 전체의 연락 정보를 나타내고

<article> 태그 안에 존재하는 해당 <article> 영역 글에 대한 연락 정보를 나타낸다.

<body>
   <!-- 해당 article 영역의 연락 정보 -->
   <article>
      <p>(주) abcd 컴퍼티</p>
      <address>연락처 : 02-000-1234</address>
   </article>
   
   <!-- 문서 전체의 연락 정보 -->
   <footer>
      <address>
         회사 주소 : 서울시 oo구 oo로 11길 1010호 <br>
         연락처 : 010-1234-5678
      </address>
   </footer>
</body>

그리고 연락처 외의 정보 (ex. 출판일) 등의 정보는 담아서는 안된다.

2. address 태그의 기본 css

address태그가 기본적으로 갖고 있는 css 속성으로는

display:block / font-style:italic 속성이 적용되어 있다.

즉, block 요소임과 동시에 이탈릭체로 표현이 된 요소로 노출된다.

https://developer.mozilla.org/ko/docs/Web/HTML/Element/address

http://tcpschool.com/html-tags/address

ES6가 나오기 전 까지 변수를 선언하는 방법은 var 선언을 통해서 할 수 있었다.

var 변수 선언 외에 ES6이상 부터는 let, const라는 변수 선언이 가능해졌다.

1. var 변수 선언의 특징

- 함수 레벨 스코프

변수의 범위가 함수의 범위 내에만 적용이 된다.

if문이나 for 문과 같은 블록 영역에 선언된 변수는 전역변수가 된다.

var test = 'test 문구';

function testFnc(){
   var test2 = 'test2 문구';
}

console.log(test);   // 'test 문구' 출력
console.log(test2);  // Uncaught ReferenceError: test2 is not defined 출력

위의 예시와 같이 함수 안에 선언한 var 변수는 함수 안에서만 사용이 가능하다.

- 변수 중복 선언 가능

변수를 이미 선언한 후에 다른 영역에서 언제든지 변수를 재선언, 중복선언이 가능하다.

이 경우 기존에 선언한 변수를 덮어버리는 경우가 되기 때문에 유의할 필요가 있다.

var test = 'test 문구';

console.log(test);   // 'test 문구' 출력

var test = '또 다른 test 문구';

console.log(test);   // '또 다른 test 문구' 출력

위의 예시를 통해 보이는 코드와 같이 test 변수를 선언 후에

다른 데이터 값으로 test 변수를 또 한번 선언하여 test 함수의 값을 변경하였다.

2. let, const 변수 선언의 특징

let, const 변수 선언은

es6 부터 등장한 문법으로 기존의 var 변수 선언과는 조금 다른 특징을 가지고 있다.

- 블록 레벨 스코프

var 변수가 함수 레벨 스코프로 함수 내에서 변수의 범위(스코프)를 잡았다면

let과 const의 변수의 범위는 블록 레벨 스코프의 형식이다.

즉, var 변수 선언과 다르게 if문, for문 등의 블록 영역 안에서 변수의 범위가 형성된다.

var testBool = true;

/* var 변수 선언 */
if(testBool == true){
   var test = 'test 문구';
}

console.log(test);  // 'test 문구' 출력


/* let, const 변수 선언 */
if(testBool == true){
   let test2 = 'test2 문구';
   const test3 = 'test3 문구';
}

console.log(test2);  // Uncaught ReferenceError: test2 is not defined
console.log(test3);  // Uncaught ReferenceError: test3 is not defined

위의 예시와 같이 var 변수 선언은 if문 안에서 사용이 되어도 전역에서 사용이 가능하고

let, const 변수 선언의 경우 if문과 같은 블록 영역 안에서 선언된 변수는

그 안에서만 사용이 가능하고 전역이나 다른 영역에서는 사용할 수 없다.

3. let 변수 선언과 const 변수 선언의 차이

위에서 let, const 변수 선언이 var 변수 선언과 다른 차이를 알아봤다면

let과 const 변수선언의 차이를 알아보려한다.

- let

변수 선언 후 데이터 변경만 가능, 재선언 불가능

- const

변수 선언 후 데이터 변경 및 재선언 불가능

위 내용과 같은 특징이 있다.

/* let 변수 선언 */
let test = 'test 문구';
let test2 = 'test2 문구';

let test = '또 다른 문구';
// Uncaught SyntaxError: Identifier 'test' has already been declared

test2 = '또 다른 2 문구';

console.log(test2);   // '또 다른 2 문구' 출력


/* const 변수 선언 */
const test3 = 'test3 문구';

const test3 = '또 다른 3 문구';
// Uncaught SyntaxError: Identifier 'test' has already been declared

test3 = '또 다른 3 문구';
// Uncaught SyntaxError: Identifier 'test' has already been declared

참고

https://poiemaweb.com/es6-block-scope

css를 사용하다보면

이미지를 세로 중앙 정렬이 필요한 경우가 매우 많이 있다.

그 방법에 대해 알아보려한다.

1. line-height와 vertical-align을 이용한 정렬

이미지를 감싸는 영역에 line-height값을 준 후에

img태그에 vertical-align:middle 속성을 사용하여 세로 중앙 정렬한다.

<style>
   .img_area{height:300px; line-height:300px;}
   .img_area img{vertical-align:middle;}
</style>
<body>
   <div class="img_area">
      <img src="./img/test.jpg" alt="test이미지">
   </div>
</body>

 2. 가상선택자 :after를 이용한 정렬

이미지를 감싸는 영역에 가상요소인 :after속성을 사용하여

세로 중앙 정렬을 한다.

<style>
   /* font-size:0을 사용하여 img_area영역 안에 여백을 없앤다. */
   .img_area{height:300px; font-size:0;}  
   .img_area:after{display:inline-block; height:100%; content:""; vertical-align:middle;}
   .img_area img{vertical-align:middle;}
</style>
<body>
   <div class="img_area">
      <img src="./img/test.jpg" alt="test이미지">
   </div>
</body>

위의 예시를 보면 img태그로 넣은 이미지 옆에

:after속성을 이용해 height:100%인 임의의 요소를 넣고

그 요소와 img태그와 vertical-align:middle 속성을 이용해 중앙 정렬을 맞춘다.

3. position:absolute 속성을 이용한 정렬

absolute를 이용해 중앙 정렬하는 방법은

크게 2가지로 나눌 수 있다.

고정된 이미지 크기를 가지고 있고

그 이미지의 크기를 확실히 알 경우에 쓸 수 있는

absolute와 margin-top 속성을 이용한 방법과

이미지 크기가 가변적이고

이미지 크기에 대한 정확한 정보가 없을 경우에 쓸 수 있는

absolute와 transform:translateY() 속성을 이용한 방법이 있다.

3-1. absolute & margin-top을 이용한 방법

<style>
   /* absolute를 사용하기 위해 감싸는 영역에 position:relative 적용 */
   .img_area{position:relative; height:300px;}  
   .img_area img{position:absolute; top:50%; margin-top:-100px; height:200px;} 
</style>
<body>
   <div class="img_area">
      <img src="./img/test.jpg" alt="test이미지">
   </div>
</body>

이미지 요소를 top 기준으로 50%만큼 이동 후에

이미지 높이값인 200px의 절반만큼을 margin-top의 마이너스 값으로 끌어 올린다.

이해를 쉽게하기 위해 아래의 예시를 준비했다.

위의 예시는 이미지 영역을 top:50%만 적용한 모습이다.

여기서 margin-top을 이미지의 높이값의 절반 만큼을 빼주면

위에 표시한 영역 만큼이 강제로 끌어올라가게 된다.

그래서 이미지 중앙 정렬을 맞출 수 있다.

3-2. absolute & transform 속성을 이용한 방법

<style>
   /* absolute를 사용하기 위해 감싸는 영역에 position:relative 적용 */
   .img_area{position:relative; height:300px;}
   /* 높이값이 고정되어 있지 않은 경우 */
   .img_area img{position:absolute; top:50%; transform:translateY(-50%);}
</style>
<body>
   <div class="img_area">
      <img src="./img/test.jpg" alt="test이미지">
   </div>
</body>

위쪽에서 설명한 absolute와 margin-top을 이용한 방법과 유사한 방법으로

margin-top은 정해진 px의 값을 빼서 끌어올린다면

transform:translate를 이용한 방법은 이미지 영역 높이의 퍼센트 값을 이용해서

끌어올리게 된다.

transform 속성의 특성상 ie9 이상부터 사용할 수 있다.

(ie9 버전의 경우 -ms- 프리픽스를 사용해서 속성을 추가해야한다.)

위에서 설명한 방법 외에도

display:table-cell을 사용하거나 display:flex를 사용하여

이미지 정렬을 쉽게 할 수 있는 방법들이 있다.

작업하는 환경과

상황에 맞춰서 알맞게 사용하면 좋을 것이다.

Sass 문법이 일반 CSS와 가장 큰 특징 중 하나는

중첩(Nesting)되어 사용되는 속성들이 있다.

1. @at-root 의 사용

기본적으로 부모 엘리먼트에서부터 중첩이 되어

css 내용을 작성한다.

.wrap{
   .cont{
      text-align:center; font-size:12px;
      p{text-align:left;}
      .lst{
         overflow:hidden;
         li{float:left;}
         
         .layer_test{border:1px solid #333; padding:10px;}
      }
   }
}

위와 같이 중첩된 내용들 중에 .layer_test를 기준으로 .wrap, .cont, .lst 와 같은

상위 요소들 안에서 사용은 되지만 불필요하게 상위 요소들을 타고

css를 사용하지 않아도 되는 영역의 경우

.wrap{
   .cont{
      text-align:center; font-size:12px;
      p{text-align:left;}
      .lst{
         overflow:hidden;
         li{float:left;}
      }
   }
}

.layer_test{border:1px solid #333; padding:10px;}

위와 같이 전혀 동떨어지게 Sass 문법을 작성해서 표현할 수 있다.

하지만 .layer_test영역이 실제 html 소스상에도 .wrap, .cont, .lst 안에 노출이 되는 영역이라면

위와 같이 Sass를 작성하다보면 작성해야할 css 내용이 많아지면

헷갈리는 경우가 생긴다.

이럴 때 사용하기 좋은 것이 @at-root 속성이다.

.wrap{
   .cont{
      text-align:center; font-size:12px;
      p{text-align:left;}
      .lst{
         overflow:hidden;
         li{float:left;}
         
         @at-root .layer_test{border:1px solid #333; padding:10px;}
      }
   }
}


/* CSS 출력 */
.wrap .cont {
  text-align: center;
  font-size: 12px;
}
.wrap .cont p {
  text-align: left;
}
.wrap .cont .lst {
  overflow: hidden;
}
.wrap .cont .lst li {
  float: left;
}
.layer_test {
  border: 1px solid #333;
  padding: 10px;
}

Sass 문법상에는 상위 요소들 안에 존재하지만

실제로 컴파일 된 css를 확인해보면 부모 요소를 타고 가는 것이 아닌

별도의 css로 작성이 된다.

2. @at-root의 응용1

위에서 작성한 문법과 같이

@at-root .layer_test{속성} 과 같은 형식으로 작성하는 방법 외에

.layer_test와 같이 별도로 부모 요소들을 타고 가지 않을 요소들을

한번에 처리할 수도 있다.

=> @at-root{} 사용

.wrap{
   .cont{
      text-align:center; font-size:12px;
      p{text-align:left;}
      .lst{
         overflow:hidden;
         li{float:left;}
         
         @at-root{
            .layer_test{border:1px solid #333; padding:10px;}
            .test_list{
               overflow:hidden;
               li{float:right;}
            }
         } 
      }
   }
}


/* CSS 출력 */
.wrap .cont {
  text-align: center;
  font-size: 12px;
}
.wrap .cont p {
  text-align: left;
}
.wrap .cont .lst {
  overflow: hidden;
}
.wrap .cont .lst li {
  float: left;
}
.layer_test {
  border: 1px solid #333;
  padding: 10px;
}
.test_list{
  overflow:hidden;
}
.test_list li{
  float:right;
}

3. @at-root의 응용2 (미디어 쿼리)

@at-root 속성은 미디어쿼리 문법에서도 유용하게 작성할 수 있다.

미디어 쿼리 문법안에서 내가 원하는 영역만 미디어쿼리 문법에 적용되지 않도록

처리할 수 있다.

(with:), (without:) 속성 사용

@media print {
  .page {
    text-align:center;
    
    // 1
    @at-root {
      .test1{font-size: 11px;}
    }
    
    // 2
    @at-root (with: all) {
      .test2{font-size: 20px;}
    }
    
    // 3
    @at-root (with: rule) {
      .test3{font-size: 15px;}
    }
    
    // 4
    @at-root (without: media) {
      .test4{color: #111;}
    }
  }
}

/* CSS 출력 */
@media print {
  .page {
    text-align: center;
  }
  
  // 1
  .test1 {
    font-size: 11px;
  }
  
  // 2
  .page .test2 {
    font-size: 20px;
  }
}

// 3
.page .test3 {
  font-size: 15px;
}

// 4
.page .test4 {
  color: #111;
}

위의 소스를 확인해보면

1번과 같이 단순히 미디어 쿼리 안에 @at-root 사용을

미디어 쿼리가 적용된 상태에서 부모 요소의 상속만 피해서 css가 컴파일이 되고

2번의 경우,

(with: all) 속성을 사용하여 문법을 작성하였는데

이 경우 1번과 마찬가지로 미디어 쿼리 문법 안에 일반 @at-root를 사용한 것과 같이

표현하게 된다.

3번과 4번의 경우

원하는 영역을 미디워 쿼리 문법 밖으로 css를 컴파일할 수 있도록 도와준다.

(with : rule)   //   (without : *print)

*print는 미디어 쿼리 문법이 screen일 경우엔 screen으로 변경될 수 있다.

css에서 단위를 작성할 때,

주로 사용하는 px 외에도 pt, rem, em 등과 함께

vw, vh, vmin, vmax 라는 단위도 존재한다.

각 단위는 디바이스 혹은 브라우저의 크기 즉, viewport에 비례해서

크기가 적용되는 단위이다.

1. vw (Viewport Width)

뷰포트의 너비에 비례해서 값이 적용된다.

디바이스의 높이는 고려하지 않고

디바이스의 너비가 768px인 경우

100vw는 768px이 되고 1vw는 7.68px이 된다.

2. vh (Viewport Height)

뷰포트의 높이에 비례해서 값이 적용된다.

디바이스의 너비는 고려하지 않고

디바이스의 높이가 1024px인 경우

100vh는 1024px이 되고 1vh는 10.24px이 된다.

<style>
   .wrap{width:10vh; height:10vw;}
</style>

<body>
   <div class="wrap"></div>
</body>

768x1024 크기의 디바이스가 있다는 가정하에 (너비 768, 높이 1024)

위와 같이 .wrap 이라는 클래스의 영역에 width:10vh, height:10vw의 단위로

값을 지정하였을 경우

width는 높이 기준의 vh이기 때문에 102.4px

height는 너비 기준의 vw이기 때문에 76.8px 의 값이 지정된다.

3. vmin (Viewport Minimum)

뷰포트의 너비와 높이 중 더 작은 값이 적용된다.

<style>
   .wrap{width:10vmin; height:10vmin;}
</style>

<body>
   <div class="wrap"></div>
</body>

768x1024 의 디바이스 사이즈 기준

위와 같이 소스를 작성하게 된다면

너비와 높이 중 너비가 더 작은 값이니 768px을 기준으로

.wrap의 width, height 값은 76.8px이 된다.

4. vmax (Viewport Maximum)

뷰포트의 너비와 높이 중 더 큰 값이 적용된다.

<style>
   .wrap{width:10vmax; height:10vmax;}
</style>

<body>
   <div class="wrap"></div>
</body>

768x1024 의 디바이스 사이즈 기준

위와 같이 소스를 작성하게 된다면

너비와 높이 중 높이가 더 큰 값이니 1024px을 기준으로

.wrap의 width, height 값은 102.4px이 된다.

5. viewport 단위 사용시 주의사항

vw, vh, vmin, vmax와 같이 viewport 단위를 사용할 때는

브라우저 호환성을 고려해야한다. 일반적인 px이나 pt, em, rem과는 다르게

- vw와 vh의 경우 ie9+ 부터 적용이 가능하다.

- vmin의 경우 ie9에서는 vm 이라는 단위로 사용이 가능하다. (vmin -> vm)

- vmax는 ie에서는 지원이 되지 않는다.

위와 같은 주의사항이 있다.

https://caniuse.com/#search=vw

SEO란 Search Engine Optimization 의 약자이며

검색 엔진 최적화를 뜻한다.

웹페이지(특히 구글)의 검색엔진이 페이지의 자료를 수집하고

해당 검색 엔진이 좋아하는 조건을 맞춰

다른 사용자들이 키워드를 검색을 했을 때 내가 작업한 페이지를 상위 배치하는 작업을 말한다.

최근에 기업에서는 마케팅과 연관지어 검색 유입을 늘리고

광고 효과를 늘리기 위해 더욱 더 많은 관심을 갖고있는 분야이다.

1. SEO(검색 엔진 최적화)의 필요성

SEO를 적용하면 뭐가 좋길래,

검색 엔진에 상위에 배치가 되면 어떤 점이 좋길래

SEO의 중요성이 점점 증가하게 되는걸까를 생각해보았다.

우선 전 세계적으로 가장 많은 사용자들이 사용하는 웹사이트인 '구글'의 예를 들면

위의 이미지와 같이 거의 모든 사용자들이

구글 검색을 해서 검색결과를 얻을 때,

1페이지에서만 머무르며 원하는 정보를 얻어가는 것을 알 수 있다.

즉, 2페이지 이후의 내용들은

사용자들의 관심을 받지 못한다.

쉽게 말하자면 '나이키 신발' 이라는 키워드를 검색했을 때,

내가 판매하는 페이지가 1페이지 이후에 있다면

많은 사용자들이 내가 판매하는 페이지를 클릭조차 안한다는 얘기가 된다.

2. SEO(검색 엔진 최적화) 적용 방법

SEO를 적용하기 위해서는 크게 6가지의 방법을 적용할 수 있다.

2-1. 보안 프로토콜 (HTTPS)

2014년 구글에선 HTTP 일반 프로토콜을 사용하는 웹 사이트보다 

HTTP 일반 프로토콜에 SSL이라는 보안 프로토콜을 더한 HTTPS 보안 프로토콜을

사용하는 웹 사이트가 더 높은 점수를 받을 것이라 발표 하였다.

그리고 2017년부터는 HTTPS 보안 프로토콜로 접속하는 사이트가 아닌 경우 크롬에서

경고 문구가 노출된다.

2-2. robots.txt (로봇 배제 표준 파일), Sitemap.xml (사이트맵)

- robots.txt

robots.txt는 검색엔진 로봇들의 접근을 제어한다.

웹사이트의 사이트맵이 어디있는지 알려주고 특정 페이지를 검색엔진에 비노출 시킬때도 사용한다.

* 파일명은 robots.txt로 지정해야하고 utf-8로 인코딩 되어 있어야한다.

* 웹사이트에는 robots.txt 파일은 하나만 있어야한다.

* robots.txt 파일은 웹사이트의 루트에 있어야 한다.

예를 들어

abcdqbbq.tistory.com 아래의 모든 페이지를 제어하려면

abcdqbbq.tistory.com/robots.txt에 파일이 위치해야한다.

- Sitemap.xml 사이트맵

사이트맵은 웹사이트 내에 모든 페이지들의 목록을 나열한 파일로 책의 목차와 같은 역할을 한다.

사이트맵은 웹사이트 내의 모든 페이지들이 원활하게 크롤링되고 색인될 수 있도록 도와준다.

* 사이트맵은 어디에서나 게시할 수 있지만 게시된 위치의 하위 항목에만 영향을 주기 때문에

사이트의 루트에 게시하는 것이 좋다.

* utf-8로 인코딩 되어있어야 한다.

* 페이지가 모바일, pc 두 버전의 URL이 다르다면 사이트맵에서 한 버전에만 연결하는 것이 좋다.

하지만 두 버전 모두 연결이 필요한 경우 URL에 주석을 추가하여 모바일, pc버전을 표시해준다.

2-3. <title>, description 태그의 사용

<title> 태그는 페이지의 제목을

<meta> 태그의 description은 페이지의 중심 내용을 설명해주는 태그이다.

<head>
   <title>SEO란 무엇인가?</title>
   <meta name="description" content="SEO는 S">
</head>

두 태그 모드 <head></head>영역 안에 작성하는 태그이며

title과 meta태그의 description을 작성시엔

모든 페이지들을 똑같이 작성하는 것이 아니라

각 페이지별로 그 페이지의 특성에 맞게 작성하는 것이 중요하다.

SEO와 관련된 내용을 찾다보면

title태그와 description이 SEO와 관계없다는 내용들도 보이는데

사용자들이 검색했을 때 보여지는 제목(A영역)과 설명(B영역) 영역이기 때문에 

설령 SEO와 연관이 없다고 하더라도

사용자들의 유입을 위해 효율적인 <title>, description 작성이 필요하다.

2-4. 소셜 검색엔진 최적화 메타태그 & OpenGraph

구글은 소셜 미디어를 통해 유입되는 경로나 활동 등을 분석하고 평가한다.

소셜 미디어에 얼마나 공유가 되었고 페이스북, 인스타그램과 같은 SNS를 통해

얼마나 많은 유입이 있는지를 분석한다.

그러한 분석을 통해 페이지에 점수를 준다.

그렇기 때문에 소셜 미디어 또한 SEO 적용을 하기 위해선

중요하게 고려해야할 사항이다.

소셜 미디어를 고려하기 위해선 OpenGraph 라는 정보에 대해 알아야한다.

OpenGraph 즉, 오픈그래프란 웹페이지가 소셜 미디어 혹은 오픈 그래프를 활용한

사이트로 공유될 때 사용되는 정보이다.

즉, 카톡이나 페이스북에 공유될 때 보여지는

페이지의 제목, 설명, 이미지 등을 meta태그에 담을 수 있다.

<head>
   <meta property="og:type" content="website">
   <meta property="og:title" content="페이지 제목">
   <meta property="og:description" content="페이지 설명">
   <meta property="og:image" content="./src/Main_img.png">
   <meta property="og:url" content="http://abcdqbbq.tistory.com">
</head>

2-5. 이미지 태그의 올바른 사용(alt 속성)

구글에서 이미지 검색의 비중은 해마다 높아지고 있다.

실제로 미국에서는 구글에서 이뤄지는 검색의 1/3 이상이 구글 이미지 검색으로 이루어지고 있다고 한다.

그렇기 때문에 이미지 태그의 중요성이 더욱 높아지고 있다.

특히나 예전엔 이미지 태그의 alt 속성의 경우 스크린 리더를 사용하는 사람들만을 위한,

웹 접근성만을 위한 도구로 생각했다면

요즘은 SEO를 위한 도구로도 사용이 된다.

가능하면 img태그를 사용하는 모든 영역에 alt 속성을 추가해주는 것이 좋다.

<img src="coconut.jpg" alt="코코넛 열매" />

2-6. 모바일 최적화

스마트폰이 보급되면서 모바일의 사용 비중은 나날이 증가하고 있다.

실제로 가정에 컴퓨터 없는 가정은 있어도 스마트폰이 없는 가정은 찾아보기 힘들 정도이다.

그렇기 때문에 모바일 최적화 또한 중요한 SEO 적용 요소로 부각되고있다.

모바일 최적화를 하기 위해서는

반응형 웹사이트를 만들어서 하나의 페이지에서 하나의 소스로

검색 엔진을 최적화 해주는 것이 좋다. (하나의 사이트맵 사용 등...)

부득이하게 PC와 모바일 버전을 분리해서 페이지를 만들어야 할 경우

Canonical 및 Alternate 태그를 사용하여

PC와 모바일 버전의 관계를 확실하게 표시해주는 것이 필요하다.

/* PC 페이지 */
<head>
  <link rel="alternate" media="only screen and (max-width:640px)" href="https://m.abcdqbbq.com">
</head>


/* Mobile 페이지 */
<head>
  <link rel="canonical" href="https://www.abcdqbbq.com">
</head>

* 구글 모바일 친화성 테스트

https://search.google.com/test/mobile-friendly

참고

https://www.twinword.co.kr/blog/search-engine-optimization-guide/

https://junhobaik.github.io/meta-tag/