성급하기 보단 꾸준함을 기르자..

HTML

글자와 상자

• 요소가 화면에 출력될 때 크게 2가지로 나뉜다.
  인라인(inline)요소 : 글자를 만들기 위한 요소들
  • span
    1.수평으로 쌓인다.
    2.대표적인 인라인 요소이다.
    3.포함한 컨텐츠 만큼 줄어든다.
    4.수평만 조절이 가능하다.
• img
• a 링크
• input 대화형 상자
  
  
• 블록(block)요소 : 상자를 만들기 위한 요소들
  • div
    1.대표적인 블록요소
  2. 수직, 수평으로 수정가능
• h
• p
• ul, li
• table 표 만들기

기본적인 문법

• <태그 title="설명"></태그> 요소의 정보 설명을 지정할 수 있다.
• <태그.style="스타일"></태그> 요소에 적용할 css지정.
• <태그 class="이름"></태그> 요소를 지칭하는 중복 가능한 이름. (사용문법 .)
• <태그 id="이름"></태그> 요소를 지칭하는 고유한 이름. (사용문법 #)
• <태그 data-이름="데이터"></태그> 요소에 데이터를 지정

CSS

선택자 - 기본

• 전체 선택자 (사용문법 *)
• 태그 선택자
• class 선택자 (사용문법 .)
• id 선택자 (사용문법 #)

선택자 - 복합

• 일치 선택자 span(태그선택자). bora(클래스선택자) 두개가 일치하면 선택
• 자식 선택자 ul>.bora
• 하위 선택자 div .bora
• 형제 선택자 .bora+li

선택자 - 가상

• .box:hover 마우스를 올렸을 때 효과
• .box:active 마우스로 클릭하고 있을 때 효과
• input:focus 포커스가 될 때 선택 됨
• .bora*:nth-child(숫자) 선택자 형제 요소중 (n번째)
• .bora*:not(span) 모든 하위 요소중 span태그를 제외한 모든 요소

요소선택자 - 가상

• .bora::before 가상의 inline요소를 만들어서 내부의 앞에 내용 삽입
  after 뒤에 내용삽입