HTML,CSS3 [CSS] Flex box Flexbox 📦 flexbox로 레이아웃 구성 : 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는다 display : flex 부모의 박스에 적용하여 자식 박스의 방향과 크기를 결정 default 값 : 자식요소는 왼쪽부터 차례대로 배치된다. flex-direction Flex 요소에 방향을 지정한다. default 값 : 박스가 수직으로 분할되는 것 설정 값 : row (default), column flex : grow shrink basis default값 : flex : 0 1 auto 세 가지는 기본 크기를 바탕으로 늘리거나 줄일 수 있다. grow : 얼마만큼의 비율로 늘어날 것인가 box 구조 .box.hong .box .box box hong만 비율을 줄 경우 #outer { display.. 2022. 5. 3. [CSS] CSS의 소개, Selector 정리, 텍스트 스타일 CSS란? CSS는 각 HTML의 요소를 꾸미는 역할을 담당한다. CSS를 통하여 효율적인 UI(User Interface) UX(User experience)를 제공한다. CSS의 구조 기본적인 셀렉터 한 종류의 태그에 적용 h1 { color: red; }모든 h1 태그에 적용된다. id에 적용 #kkk { color: red; }#을 앞에 붙여 사용한다 kkk라는 id를 가진 단 하나의 태그에 적용된다 id는 문서 내 하나의 요소에만 적용 되어야 한다. class에 적용 .hhh { color: red; }.을 앞에 붙여 사용한다 hhh라는 class를 가진 모든 태그에 적용된다 텍스트 꾸미기 color : 글자의 색상을 변경한다 font-family : 글꼴을 설정한다. font-size : 글자.. 2022. 4. 29. [HTML] HTML 기본적인 구조 및 태그 설명 HTML이란? HyperText Markup Language의 약자로 마크업 언어 다. 기본적인 웹의 구조(뼈대)를 만드는 언어 TAG의 형태로 구성된다. 트리구조를 가지고 있다. 트리구조란? 부모와 자식 관계를 가지고 있는 구조 태그의 종류 시멘트 태그 : 이름에 의미를 붙여 사용하는 태그 (ex. header, footer, h1~h4 등) 표에 적혀있는 태그들을 제외하고도 너무나 많은 태그들이 존재한다. 태그를 직접 만드는 경우도 있다. 태그를 외우는 것보다 필요할 때 찾아서 쓰는 것을 권장한다.기본적인 구조 Hello world Contents Here too! 2022. 4. 29. 이전 1 다음
