HTML

css 중요 문법

박스 콘텐츠 영역 : width, height 공간 padding 영역 : 안쪽 여백(콘텐츠와 테두리의 영역) -> 실제 크기에 변화를 줌 border 영역 : 테두리 영역 margin 영역 : 바깥쪽 여백 block , inline block 자동으로 줄바꿈이 되는 요소로 화면 전체를 사용 width 미지정 시 화면공간 100% block 안에 block요소와 inline 요소를 포함할 수 있다. inline 태그안 콘텐츠만큼 width가 자동으로 지정 width와 height를 변경할 수 없음 inline 안에 inline을 포함할 수 있지만 block은 포함할 수 없다. 선택자 BEM (.block__Element--Modifier) .header .nav { (X) } /* 이렇게 하면 nav가 ..

반응형 웹 만들기_02

https://github.com/1997MJ/ResponsiveWebPra_02 GitHub - 1997MJ/ResponsiveWebPra_02Contribute to 1997MJ/ResponsiveWebPra_02 development by creating an account on GitHub.github.com   배운 점  - 웹사이트 내에서 다른 웹사이트를 보여줄수 있는 태그 src = 주소frameborder = 테두리 표시 여부 0(표시 X), 1(표시 O) - 웹 양식의 요소들을 하나의 그룹으로 묶을 때 사용하는 태그 - 의 제목 정의 -폼 요소에 이름표를 붙이는 태그for = 요소의 id!important - 속성을 고정시키는 단어 opacity: - 투명도 설정 단어

css 초기화

/* 웹폰트 추가 */ /* 웹폰트 CSS */ @import url('??'); /* CSS 초기화 */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figur..

반응형 웹 만들기_01

https://github.com/1997MJ/ResponsiveWebPra_01 GitHub - 1997MJ/ResponsiveWebPra_01Contribute to 1997MJ/ResponsiveWebPra_01 development by creating an account on GitHub.github.com   배운 점border-spacing : ?px; -테두리 사이의 간격 지정border-collapse : collapse; - table의 테두리를 하나로 합쳐 표시box-sizing: content-box; - 박스의 사이즈를 콘텐드 박스로 지정vertical-align : ?; - 수직정렬 위치 지정text-align : ?; - 수평정렬 위치 지정 - 이미지, 차트 등을 담는 컨테이너..

플렉서블 박스

플렉서블 박스란? 가변적인 박스를 아주 손쉽게 만들수 있는 기술 플렉서블 박스의 기본 개념 플렉서블 박스는 부모 박스이다. 즉 부모 박스를 먼저 flex로 선언해야 자식 박스를 사용할 수 있다. 플렉서블 박스의 자식 박스는 플렉스 아이템이다. 플렉서블 박스의 축 과 주축은 중심이 되는 축으로 해당 축을 기준으로 플렉스 아이템이 배치된다. 교차축은 주축의 반대 ex) 주축: 가로 ,교차축: 세로 플렉서블 박스 문법 기본 설정 display : flex (박스를 블록 수준의 플렉서블 박스로 작동) inline-flex (박스를 인라인 수준의 플렉서블 박스로 작동) 플렉스 아이템의 배치 방향 설정 flex-direction : row (박스를 왼쪽에서 오른쪽으로 배치, 설정 시 주축은 가로) row-rever..