본문 바로가기

CSS29

[CSS] layout 레이아웃 2 - display : inline-block 💾 Editor: VSCode 👉 display block: 한 행을 전부 차지 inline-block: 내 크기만큼 차지 (어울림) index.html 와 사이에 공백이 있으면 안 됨... 와 사이에 주석을 주는 것도 방법 중 하나임 부모 태그에 font-size: 0px; 주는 것도 또 다른 방법임 => 상속 style.css .left-menu { width: 20%; height: 400px; background: cornflowerblue; /* float: left; 추가 */ display: inline-block; /* 추가 */ } .right { width: 80%; height: 400px; background: coral; /* float: left; 추가 */ display: in.. 2022. 12. 31.
[CSS] layout 레이아웃 1 - float 💾 Editor: VSCode 위와 같은 레이아웃을 배치하는 실습 진행. 오른쪽처럼 전체 레이아웃을 감싸는 wrapper(or container) 박스를 만들어두면 좋음. layout1.html .container .container { width: 800px; /* 최대 width를 설정 */ } 전체 레이아웃을 감싸는 wrapper box .header .header { width: 100%; /* 부모 태그의 width의 100% */ height: 100px; background: aquamarine; } width를 100% 주면 부모 태그의 width의 100%를 사용한다는 의미 .left-menu && .right (수정전) .left-menu { width: 20%; height: 400p.. 2022. 12. 30.
[HTML] selector 선택자 (tag, class, id) + style 💾 Editor: VSCode 👉 기존 html 코드 devje Front-end Developer I want my dream to come true. The future is mine. 기존 html 코드에서 style 속성으로 넣었던 것을 모두 style.css 로 옮긴다. html 파일 안에 html과 css를 연결하는 link 태그를 head 안에 작성한다. 👉 index.html => style.css (스타일 속성 옮기기) index.html style.css .profile { width:100px; display:block; margin-left:auto; margin-right:auto; } img 태그에 class 속성 추가 style.css 파일에 코드 옮기기 html 태그에 sty.. 2022. 12. 28.
[부스트코스] 8 미디어 쿼리 8. 미디어쿼리 1)미디어쿼리 소개 반응형 웹 사이트 제작에 반드시 필요한 기술 각 미디어 매체(screen, print)에 따라 다른 스타일 시트를 적용할 수 있게 만드는 것 2) 미디어 타입 & 미디어 특성 @media(at media) 미디어 타입(Media Types) 미디어 특성(Media Features) @media mediaqueries { ... } /* 미디어 쿼리 구문은 논리적으로 평가되며 참이면 뒤에 나오는 스타일 규칙이 적용되고, 거짓이면 무시됨 */ Media Types (미디어 타입) all, braille, embossed, handheld, print, projection, screen, speech, tty, tv all, print, screen 을 현업에서 많이 사용하.. 2022. 3. 22.
[부스트코스] 7 CSS 레이아웃 7. 레이아웃 1) 속성-display DISPLAY display: none; display: inline; display: block; display: inline-block; display: list-item; display: flex; display: inline-flex; display: table; display: table-cell; box box box inline-box는 배치는 인라인처럼 되고, 속성은 box 속성 2) 속성-visibility 요소를 어떻게 숨길 것인지 결정 visibility: visible|hidden|collapse|initial|inherit; visibility: visible; /* 보임 기본값 */ visibility: hidden; /* 숨김, 자신의 박.. 2022. 3. 21.
[부스트코스] 6-2 CSS 폰트, 텍스트 6. 폰트, 텍스트 8) 속성-font font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit; /* size | family */ font: 2em "돋움", dotum, sans-serif; /* style | size | family */ font: oblique 2em "돋움", dotum, sans-serif; /* style | variant | weight | size/line-height | family */ font: oblique small-caps bold 16px/1.5 '돋움'.. 2022. 3. 20.