Nyong's Blog
0%

201023_TIL(gradient 사용하기, HTML dl dt dd)

Posted on Edited on In

오늘 한 것

gradient

  • linear-gradient 와 radial-gradient가 있다.
  • linear-gradient는 선형으로 지정 색상들로 자연스럽게 변형해가며 색을 그려준다.
1
2
3
4
5
6
7
background: linear-gradient(
  to bottom,
  #efa22f 0%,
  #ed702d 35%,
  #ed702d 70%,
  #efa22f 100%
);
lg
  • 다음과 같이 그라데이션 효과로 그릴 수 있다.
  • to bottom to top to bottom left 등 진행 방향을 설정할 수 있다.
  • radial-gradient는 반지름을 그리며 색상을 자연스럽게 변형시켜준다.
1
background: radial-gradient(circle at right top, #efa22f, #ed702d);
rg
  • ellipse는 타원, circle은 원형을 그린다.
  • 선형과 마찬가지로 방향을 줄 수 있다.

참고 linear-gradient / radial-gradient

align

  • Text-align block 요소에 속성을 주는 정렬
  • Vertical-align inline 요소에 속성을 주는 수직 정렬
  • 혼동하지말자!

접근성

  • font-size는 12px 이상으로 설정하자, 미만이라면 접근성도 떨어지며 SEO(검색최적화) 점수가 낮아서 검색 결과에 반영이 안되는 경우가 발생한다.

  • 접근성 측면에서 마우스로 접근 가능한 콘텐츠는 키보드로도 접근이 가능하게 설계하는 것이 좋다.

background

1
2
3
background-color: red;

background: url(./images/icon.png) no-repeat 25px 50% / 20px 20px;

  • 위와 같이 Background y 50% 좌표를 백분율로 주면 소속된 요소의 백분율 값과, 이미지의 좌표 백분율 값을 둘 다 계산하여 콘텐츠를 배치한다.

  • 위와 같은 경우 앞의 background-color: red;는 무시되는데, 그 이유는 개별 속성을 정의하고 단축 속성으로 재정의할 경우 앞선 개별 속성 값은 초기화된다. (중요)

article vs section

  • article은 완전 독립된, 홀로 서는 콘텐츠를 뜻한다. 문맥상 독립적이고 홀로 완전한 것을 말한다.

  • section은 ‘1장 1절, 2절’ 같은 대주제의 안에서 나눠지는 부분들을 나눌 때 쓰인다.

  • 하지만 둘 다 콘텐츠를 묶는 요소로써 쓰이기 때문에 이것에 대한 의견이 많이 갈리는 편임이다. 개인의 기준을 갖고 사용하면 된다.

dl, dt, dd

  • Heading(h1~6)이 아니라 <dl>을 사용하는 이유는 용어 정의 정도로 제목을 낭비해서는 안되기 때문이다.

  • <dt> <dd> 는 일대일 대응으로 작성하는 것을 권장한다.

  • <dl> 내부에서 <dt> <dd>를 <div>로 엮을 수 있지만 딱 거기까지만 허용한다. (이 이상으로 division을 사용하여 묶는 것은 안 된다.)
    다음 문서의 <div> as a child of a <dl> element. 부분을 참고하자. > dl과 div의 상관관계

기타

  • Css의 답답함 때문에 전처리기인 SASS, LESS, STLY 등이 쓰인다. 특징으로는 변수 생성 기능, float해제 등에 대한 믹스인 기능, placeholder 기능, 내장 함수 로직 기능, 모듈화 제공 등과 더 발전하면 BEM표기법과 결합하여 모듈화 시킬 수 있는 특징이 있다. (CSS에 익숙해지면 꼭 익혀봐야지!)

  • 아래와 같이 <span>태그를 이용하여 아이콘을 넣어준다.
    image

1
2
3
4
<li class="signup">
  <span class="icon-right-open" aria-hidden="true"></span>
  <a href="#">회원가입</a>
</li>

  • 이유는 ::before를 사용하면 JS로 제어하지 못 하며, 브라우저마다 다르지만 스크린리더가 콘텐츠를 읽어버리는 경우가 발생한다.

  • 크로스 브라우징의 필요성에 대해 다시 한번 절실히 느낀다.

  • <button>은 브라우저마다 여백이 다르다. 재정의해줄 필요가 있다.

오늘 느낀 것

  • 마크업 설계도 어렵지만 CSS는 진짜 어떻게 작동하는지 아직도 모르겠다. 그래도 계속하자. 항상 말하지만 계속 코딩하자.

  • 한 주가 끝났다. 이번 주에 정말 스스로 떳떳하게 열심히 했는지 돌아본다. 잘 모르겠다. 배움에 욕심이 나지만 아직까지 스스로의 욕심을 따라가지 못한다.

  • 주말 동안 이것 저것 혼자 공부해봐야겠다.

  • 다음주도 ‘즐코’하자!

Nyong’s GitHub