HTML - 기초지만 얕은 개념

브라우저 - 코드 실행기로 볼 수 있음
반응형 웹 - 화면 크기에 따라서 유동적으로 변경됨
html - 공간을 만들어 채워넣음

 

block tag - 행을 모두 공간으로 차지함(div)
inline tag - 배당된 영역만 공간으로 차지함(span)
종속 tag - 부:자 관계를 갖는 태그를 의미
(select:option / ul:li)

radio - 동그란 인풋창 생성
input - 인풋태그 내에 name을 활용하여 한 가지만 선택 가능하도록 할 수 있음

 

     <div class="gender">
                <input name="gender-choice" type="radio">
                <span>여성</span>
                <input name="gender-choice" type="radio">
                <span>남성</span>
            </div>

 

css 사용 방법
1. HTML 태그에 직접 활용 가능 / 별다른 지정이나 연결이 필요하지 않음 / 유지보수 불리 / 가독성 나쁨

2. style태그에 작성 / html 과 연결해주어야 함

3. css파일에 만들어 불러오기 / html 과 연결해주어야 함 / 관심사 분리 가능

 

전체 선택자 - *
태그 선택자 - 태그 전체에 적용
class 선택자 - .class
id 선택자 - #id

 

html 태그들은 모두 박스 모델로 이루어져 있음
margin(영역 밖) > border > padding(영역 내) > contents
border-box 를 실무에서는 자주 활용함

 

* {
    box-sizing: border-box;
    margin: 0px;
}

position
absolute 박스의 절대 위치
relative 부모 박스 기준 상대 위치
fixed 화면 기준 절대 위치(네비게이션 바, 광고)