[HEXO]링크공유하기 버튼을 헥소블로그에 커스텀하게 적용하기(ft.AddToAny)
[HEXO]링크 미리보기 이미지 변경하기(ft.Open Graph)

Position 포지션

position

  • position:static; 기본값
  • position:relative; 기준점: 현재위치
  • position:absolute; 기준점 : 부모를 기준으로 이동.
Read More

[ITWILL : WEB]마진과 패딩, 인라인과 블록 차이

ITWILL학원 : 10강 WEB(HTML, CSS) BY 김영희

1. margin 마진

  • 테두리기준 바깥여백
  • margin왼쪽값과 오른쪽값이 서로 같으면 요소는 항상 중앙에 온다.
    • 따라서 margin의 좌우값을 auto를 지정
  • margin : 위 오른 아래 왼

2. padding 패딩

  • 테두기리준 안쪽여백
  • padding : 위 오른 아래 왼

3. margin과 padding 차이

https://uxengineer.com/padding-vs-margin/

4. inline과 block 차이

  • 인라인요소(한줄에 나란히 오는 요소, 줄바꿈이 없는 요소) :
    • 상하 margin과 height와 width 아예 적용 안됨
    • 좌우 margin가능
    • img태그와 input태그는 예외

https://dev.to/devansvd/did-you-know-html-elements-had-an-element-named-element-2al7

[ITWILL : WEB]TEXT속성

[ITWILL : WEB]폰트속성

ITWILL학원 : 9강 WEB(HTML, CSS) BY 김영희

1. font속성(폰트속성)

속성은 크게 두가지 그룹이 있다

그 중 폰트속성 먼저 알아보면 아래와 같다.

font 속성종류 특징
font-size 글자 크기
font-weight 글자 두께
font-style 글자 기울기
font-family 글자(서체) 지정

2. font-size

다양한 단위가 있다.
실무에서 주로 쓰이는 단위는 px, pt(포인트)이다.

https://www.mediavine.com/increase-font-size-and-increase-seo-rpm-along-with-it/

참고링크 : 폰트사이즈변환

3.font-family

한글 본문은 고민하지말고 맑은 고딕으로 쓰면 된다.

  • 기본폰트 :
    기본글꼴종류는 크게 세 가지로 나뉜다
  1. Sans-serif 고딕형 : sans의 의미는 without이다. 글자의 끝이 딱 떨어지는 느낌, 가독성이 제일 좋음
  2. Serif : 끝에 장식이 있는 클래식한 느낌
  3. Monospace : 고정글꼴. width가 same한 글꼴이다.
    글꼴이름을 넣을때는 쌍따옴표를 넣고 글꼴종류를 적을때는 쌍따옴표를 적으면 안된다.

참고링크 : w3schol

웹폰트 사용법은 간단하다.

  1. 해당 웹폰트의 html의 link태그를 복사하여 head태그 사이에 붙여넣기.
  2. 해당 웹폰트의 css코드를 복사하여 css페이지에 붙여넣기.

[ITWILL : WEB]더미텍스트/이미지만들기(Lorem Ipsum/placeholder), 기본선택자 종류 및 우선순위, 섹션요소

ITWILL학원 : 9강 WEB(HTML, CSS) BY 김영희

1. 더미데이터 만들기

1-1. Lorem Ipsum 로렘입숨 : 더미텍스트만들기

  • 줄여서 립숨, lipsum
  • 임의의 텍스트를 넣어서 HTML구조와 CSS 디자인을 보고싶을때 자주 사용
  • vscode에서는 lorem검색하고 tab치면 자동완성
  • 이클립스(Eclipse)는 아래 사이트에서 원하는 모양대로 설정뒤에 복붙하면 된다

참고링크 : 입숨

1-2. placeholder : 더미이미지만들기

1
2
3
<img src="http://via.placeholder.com/가로길이x세로길이/바탕색코드/글자색코드?text=이미지안글자" />
//예시
<img src="http://via.placeholder.com/400x600/000000/ffffff?text=400x600">

참고링크 : placeholder

2. 기본 선택자 종류 및 우선순위

선택자는 기본선택자와 가상선택자가 있다 그 중 기본선택자를 보자.

  • 기본선택자종류

  • 선택자 우선순위
    기본적으로 가까울수록 우선순위가 높다.
    아래 이미지로 대략적으로 확인할 수 있고 위의 이미지처럼 계산할 수 있다
    계산해주는 사이트도 있다

참고링크 : css 선택자 우선순위 계산사이트

  • 주요 가상선택자종류

3. 섹션요소

홈페이지 용도별 태그명이 다르다.

  • BODY, HEADER, NAV, SECTION, ARTICLE, MAIN, ASIDE, FOOTER

https://webdir.tistory.com/310