웹 표준 사이트 만들기 : 탭 메뉴, 게시판, 갤러리, 로그인, 팝업, 푸터 작업

 

• UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 80

---

Review

 

 

 

---

 

• UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 80

 

 

웹스토리보이님의 강의를 들으면서 알게 된 팁을 정리해보았다.

 

 

<em 태그>

 

1. 정의 (Definition) : 텍스트를 강조하는 데 사용한다.

 

2. 비교(Compare) 

- 글씨를 특별한 이유로 평범한 글자와 구분하기 위해서는 <i> 태그를 사용한다.

- 글씨를 중요성과 관련성을 전달하지 않고, 다른 텍스트와 구별 할 때 <b> 태그를 사용한다.

- 글씨를 강조하고 싶다면 <em> 태그를 사용한다.

- 글씨의 중요성을 강조하고 싶다면 <strong> 태그를 사용한다.

- 글씨의 중요성과 강조를 고려하지 않는 단순 참고용 표시를 사용한다면 <mark> 태그를 사용한다.

- 글씨의 전문적인 용어를 정의할 때는 <dfn> 태그를 사용한다.

- 글씨를 위첨자로 표현하고 싶다면 <sup> 태그를 사용한다.

- 글씨를 아래첨자로 표현하고 싶다면 <sub> 태그를 사용한다.

-글씨의 맞춤법이 틀린 단어를 표현하고 싶다면 <u> 태그를 사용한다.

 

 

 

 

<콘텐츠 요소를 보이지 않게 하는 방법>

1. display: none;  ↔  display: block;

2. visibility: hidden;  ↔  visibility: visible;

3. opacity: 0;  ↔  opacitiy: 1;

4. width: 0;

    height: 0;

    overflow: hidden;

 

 

 

 

<자주 쓰는 margin-top을 class로 미리 만들어 놓기>

 

.mt10 {
  margin-top: 10px !important;
}
.mt15 {
  margin-top: 15px !important;
}
.mt20 {
  margin-top: 20px !important;
}
.mt25 {
  margin-top: 25px !important;
}
.mt30 {
  margin-top: 30px !important;
}
.mt35 {
  margin-top: 35px !important;
}
.mt40 {
  margin-top: 40px !important;
}
.mt45 {
  margin-top: 45px !important;
}
.mt50 {
  margin-top: 50px !important;
}

 

 

 

 

 

 

 

<ir 효과 class로 만들어 놓고 경우에 맞게 적용하기>

 

 

/* IR 효과 */
/* 의미있는 이미지의 대체 텍스트를 제공하는 경우 */
.ir_pm {
  display: block;

  font-size: 0;

  line-height: 0;

  text-indent: -9999px;

  overflow: hidden;
}

/* 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고자 하는 경우 */
.ir_wa {
  display: block;
  width: 100%;
  height: 100%;

  position: relative;
  z-index: -1;

  overflow: hidden;
}

/* 대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때 */
.ir_su {
  position: absolute;

  width: 0;
  height: 0;

  line-height: 0;

  text-indent: -9999px;

  overflow: hidden;
}

 

 

 

 

 

 

<float: left;로 인한 영역 깨짐 (height: 0) 방지법>

 

 

1. 깨지는 영역에 똑같이 float: left;를 사용한다. (X) 

 

→ 모든 박스에 float: left;를 사용해야해서 잘 사용하지 않는다.

 

 

2. float의 성질을 차단하는 clear: both;를 사용한다. (X)

 

→ 어떤 영역이 깨졌는지 찾기 어려워서 잘 사용하지 않는다.

 

 

3. float을 사용한 상위 박스한테 overflow: hidden;을 사용한다. (X)

 

→ 이 방법도 잘 사용하지는 않지만 아직 clearfix를 배우지 않아서 이 방법을 사용한다.

 

 

4. clearfix를 사용한다. (O) 

 

 

→ 제일 좋은 방법이다.

 

 

 

 

 

 

<이미지를 표현하는 방법>

 

1. img 태그로 표현 (의미가 있을 때) : alt 태그 - 대체 문자 표현

 

2. background 속성으로 표현 (의미가 없을 때) - 대체 문자 X

 

3. 이미지를 background 속성으로 표현 

 

: 웹 표준을 준수하기 위해서는 가상으로 대체 문자를 만들어준다. (IR 효과) 

 

이미지 스프라이트 효과

 

 

 

 

 

 

 

<기타>

 

1. 절대값(absolute)이 부여된 태그(img)는

• 에서 텍스트의 정렬을 위해 패딩값을 주어도 그 값이

 

    적용되지 않는다.

 

 

2. h1 태그는 블록 요소라서 text-align이 적용된다.

 

3.  a 태그는 인라인 요소라서 padding을 적용하려면 block 요소로 바꿔야 한다.

아니면 inline-block 요소로 바꿔줘도 padding이 적용된다.

 

 

 

 

---

 

 

 

오늘 작업은 여기까지 완성 !

내일부터는 JavaScript로 전체메뉴 작업을 시작할 것 같다 -