[웹 개발 (기초)] section 2. html & css 기본

• HTML : 뼈대를 잡고
  텍스트, 이미지, 입력창 등 우리가 웹어서 보는 요소를 정의
• CSS : 디자인을 한 후
  정의된 요소들에 스타일을 부여
• JAVASCRIPT : 웹의 모든 동작을 처리한다
  버튼을 클릭했을 때, API서버와 통신할 때 등 모든 동작을 처리
  

*웹 개발자모드 : command + option + i

html 기본구조

web.html

link 태그 : css 파일 지정
script 태그 : javascript 파일지정

web.js

alert( " " ) : 알림창 띄우기

web.css

html 주요태크

• h1 ~ h6
• p
• a (href)
• img
• form
• label
• input
• br
• div

css

선택자(Selector)

: 스타일을 적용할 대상.

• 태그 p { }
• id #id { }
• class .class { }

복합선택자

div 태그 안의 div 태그 선택을 위함.
#.id > 태그 { }

자주 쓰이는 속성

• background-color
• color
• margin
• padding
• border

flex 레이아웃

(Container 속성)

• display:flex
  배치 (Container에 주면 item 들이배치)

• flex-direction:row
  column:수직정렬, row:수평정렬

• justify-contents:center
  수평 여백 조절

• align-items: flex-start
  수직 여백 조절

(item 속성)

• flex-basis: px
  너비

• flex-grow:
  수평 여백의 비중

• flex-shrink
  줄어드는 비중

• flex: 너비 여백 수축