HTML

HTML 4강. flex

display의 옵션 중에 block, inline, inline-block을 배웠었다. 이제 flexbox를 배워볼 건데 이걸 활용을 하게 된다면 아주 레이아웃 배치가 쉬워질 것이다. 사용법 display : flex; 부모 자식 태그 모두 block 상태라 자식 태그가 부모 태그 범위를 가린 모습이다. block이던 박스 2개가 inline-block이 된 것을 볼 수 있다. * flex 쓰지 않고 쪼개는 방법 : 따로 올라간 '실습'글 참고! 그냥 이렇게 힘들고 지저분하게 쓰지 말고 깔끔하게 flex 쓰자! flex를 적용시키는 방법은 내가 제어하고 싶은 대상의 부모한테 코드를 적어야 한다. 부모 태그가 자식을 감싸야 자식에게 적용된다는 것이다. 이때 자식이 flex가 적용되어 inline-bloc..

2021. 12. 31. 14:33

HTML

HTML 3강. CSS

CSS(Cascading Style Sheets) : HTML을 디자인해주는 스타일 언어 지금의 HTML은 문서를 구조화하는 언어이고 세세한 것들 하나하나 조금 더 예쁘게 해주는 언어가 CSS이다. CSS가 무엇인지 알아보자. head 태그 안에 title이라고 영어를 치고 엔터만 눌러도 이 자동 완성될 것이다. 이것을 code assistance라고 한다. code assistance : 코드 자동완성 브라우저의 제목은 head에 기입한다. HTML 문법은 이게 끝이다. CSS 문법은 조금 다르다. 1. head에 적어야 함 2. 태그 사이에 적어야 함 3. 태그이름 { 중괄호 안에 기술하면 됨 } .클래스명{ } : 태그 이름이 아닌 클래스 이름을 따라갈 때 .클래스명 div{ } : 클래스 아래 자..

2021. 12. 31. 12:07