LEARN/HTML | CSS39 [CSS] selector 문법으로 css 코드 양 줄임 💾 Editor: VSCode 👉 참고 이름 날짜 블로그 글 가성비 맛집 발견 float 준 다음에 margin-top이 안 먹힐 경우에는 float 준 요소 다음에 clear:both 넣은 추가함 👉 navbar 만들기 layout1.html (1) 영화 맛집 IT 컴퓨터 대신에 사용. 기능은 똑같음 style.css .navbar li { display: inline-block; } selector 문법 공백: '~안에 있는' 모든 자식 selector 문법 > : '~안에 있는' 직계 자식 layout.html (2) 영화 맛집 IT 컴퓨터 태그 추가. 경로가 지정되지 않았을 경우에는 "#" 이런 형태로 우선 작성 style.css /* 내비게이션 */ .navbar li { display: inl.. 2023. 1. 1. [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] div 박스 css design (box-shadow) 💾 Editor: VSCode 🔎 div 네모 박스를 넣고 싶다면 'div' 사용 index.html style.css .box { width: 100px; height: 100px; background-color: aqua; } 네모 박스가 하나 추가됨 style.css .box { width: 100px; background-color: cadetblue; margin: 30px; /* 상하좌우 여백 */ padding: 40px; /* 상하좌우 안쪽 여백 */ /* border: 4px solid black; 테두리 */ border-radius: 15px; /* 테두리 둥글게 */ /* 가운데 정렬 */ /* display: block; 생략 가능, div가 박스 특징 */ margin-left:.. 2022. 12. 29. [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. [HTML] STYLING 웹페이지 스타일링 💾 Editor: VSCode 🔎 STYLING 👉 text style font-size: 글자 사이즈 font-family: 폰트 종류 color: 폰트색 letter-spacing: 자간 조절 👉 강의 듣는 중 완성 devje Front-end Developer 👉 실습 :: 소개글 알아서 완성 devje Front-end Developer I want my dream to come true. The future is mine. 이번 강의에서는 태그 내에 style 속성을 넣어서 스타일링 하는 실습을 했다. div 태그 활용해서 프로필 이미지와 텍스트 뒤에 백그라운드 컬러를 넣었다. 컬러는 gold! 그리고 mine 글자에 blue 컬러 지정! 코딩애플 공부 기록 2022. 12. 26. 이전 1 2 3 4 5 ··· 7 다음
