radio와 checkbox가 클릭이 안되는 오류가 발생했다.
css문제인 줄 알고 디자인팀에 문의했는데 css문제가 전혀 없었고 id를 추가하면 됩니다~하는 답변을 받았다.

이미지태그사용시 src경로에 이미지가 없다면 기본 이미지를 설정하고 싶었다.
찾아보니 onerror 속성을 찾아서 손쉽게 처리할 수 있었다. 그런데 여전히 디폴트이미지를 못 불러오는 에러가 발생했다.

Hexo를 이용해서 간편하게 개발블로그를 운영하고 있다.
블로그의 좋은 글을 편하게 공유해갈 수 있는 링크 공유하기 버튼을 만들고 싶었다.

내 블로그글의 링크를 복사하여 카카오톡에 공유하는데 미리보기 이미지가 hexo-theme-icarus 이었다.
이 부분을 커스텀하고 싶어서 head 소스에서 찾아보니 Open Graph가 담당하고 있었다.

경로란 파일 위치를 알려줘서 연결할 때 사용한다.
이번에 ~라는 경로를 보았다. 항상 .만 보았기때문에 어떤 경로인지 궁금했다.

position

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

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

1. margin 마진

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

2. padding 패딩

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

3. margin과 padding 차이

4. inline과 block 차이

• 참고링크 : HTML 정의태그 dl, dt, dd 태그, code 태그, block VS inline VS inline-block

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

1. text속성

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

• font
• text

그 중 텍스트속성에 알아보면 아래와 같다.

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

1. font속성(폰트속성)

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

• font
• text

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

2. font-size

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

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

3.font-family

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

• 기본폰트 :
  기본글꼴종류는 크게 세 가지로 나뉜다

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

참고링크 : w3schol

• 웹폰트 :
  폰트패밀리로 기본폰트를 지정해주었을 때, 만약 사용자의 컴퓨터에 해당 폰트가 없다면 폰트 적용이 아예 안된다.
  이를 예방하기위해 웹폰트를 사용할 수 있다. 사용자가 굳이 다운로드하지않더라고 웹폰트가 적용된 채로 홈페이지를 볼 수 있다.
  • 웹폰트는 무료도 있고 유료도 있지만 제일 유명한 구글폰트는 무료이다.
  • 구글웹폰트
  • 구글웹폰트깃허브 : 한글
  • 눈누 : 한글폰트로 유로뿐만 아니라 무료상업용웹폰트도 쉽게 찾을 수 있다.

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

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

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