본문 바로가기

css

(5)
코드잇 코딩캠프 7기 (6/23 ~ ) - 27일 차 공부기록 (웹 퍼블리싱 2. HTML/CSS 핵심개념 - 해변의 몽숭이, 명언, 우표 붙이기) * position position: static; - 기본형, 원래 있어야할 위치 position: relative; top: 30px; 원래 있어야할 자리 위에 30px 간격이 있게끔 함 *margin과 position의 차이점 margin - 문장 다같이 이동하는 느낌 position - 레이아웃 효과를 주는 것처럼 position한 문장만 따로 수정되게끔 함 * 해변의 몽숭이 ↓html ↓css img { display: block; margin: 0 auto; } .mongsoong { position: relative; bottom: 100px; left: 200px; } ↓실행결과 https://bakey-api.codeit.kr/web/enrollments/60e42be122ff6d2ddf..
코드잇 코딩캠프 7기 ( 6/23 ~ ) - 23일 차 공부기록 (웹 퍼블리싱 2. HTML/CSS 핵심개념 - CSS 최적화) * CSS 우선순위 - 상속 ( 태그에는 color 속성이 상속 X , 태그가 억지로 상속을 받아오기 위해서는 해당 속성에 inherit ) Let's go to google! Let's go to google! .div1 { color: green; } .div2 { color: orange; } .div2 a { color: inherit; } *CSS 우선순위 - 명시도 Link 1 Link 1 Link 1 Link 1 ul li:first-child #link { color: green; } ul li:first-child a { color: orange; } * CSS 최적화 ↓html HTML CSS JAVASCRIPT PYTHON JAVA ↓CSS h2 { padding: 20px; font..
코드잇 코딩캠프 7기(6/23 ~ ) - 20일 차 공부기록 (웹 퍼블리싱 2.HTML/CSS 핵심개념 - 그랜드 부다페스트 호텔, 로그인 페이지, 썸머 뮤직 페스티벌 (SMF)) * 박스 형태 모든 html 요소는 박스형태 마우스 우클릭 -> 검사 를 누르면 박스 형태를 보여주는 다이어그램 나옴 * border 간단 border: 5px solid red; - 5px의 빨간 테두리를 입힘 브라우저가 각 요소별로 여백을 설정해둬서 여백 O * padding & margin padding - 내용이랑 테두리 사이에 여유를 줌 * padding 설정 방법 (margin도 마찬가지) 일반 padding-top: 50px; padding-right: 65px; padding-bottom: 20px; padding-left: 80px; 시계방향 padding: 50px 65px 20px 80px; 위아래/양 옆 다 똑같 padding: 50px; 위아래 50px / 양 옆 25px로 각각 ..
코드잇 코딩캠프 7기(6/23 ~ ) - 18일 차 공부기록 (웹 퍼블리싱 1. HTML/CSS 시작하기 - 여행사이트) 요소 - 요소 묶어줌 요소 스타일링 시, 를 해주고 하면 됨 background-color: #eee; - 배경색 border-radius: 20px; - 모서리 둥글게 margin-bottom: 50px; - 아래 여백 padding: 50px;- 내용들이 테두리에 붙어서 너무 갑갑한 느낌이 들면 여유를 주기위해서 씀 width: 500px; - 가로길이 margin-left: auto; margin-right: auto; - 이 두개는 가운데 정렬 title 을 꾸며주려면, title이 movie 안에 있는 클래스니까, .movie .title {스타일링} 해주면 됨 프로그래밍을 할 땐 반복적인 코드는 피하는 게 좋은데 css 코드가 겹치는 경우에는, 폴더 이름 css 파일은 styles.css 그리..
코드잇 코딩캠프 7기 (6/23 ~ ) - 16일 차 공부기록 (웹 퍼블리싱 1.HTML/CSS 시작하기 - 텍스트 꾸미기 연습, 듀엣 가요제, 노래 브리지 ) CSS 기본 문법을 쓰려면 태그를 써줘야함 font-size: 64px; -> 글자 크기 text-align: center; -> 텍스트 정렬(align), center right left margin-top: 100px; -> 여백(margin), top bottom left right color: lime; -> 텍스트 색깔 태그에 있는 텍스트 꾸밀려면 -> p i { font-size: 64px; } 이런 식으로 어디에 속해있는 i 인지 말해줘야함 1. 텍스트 꾸미기 연습 Codeit 내 첫 HTML 프로젝트 이름: 이윤수 이메일: yoonsoo@codeit.kr 나는 HTML을 좋아한다. 앞으로 이 강의를 듣고, 나만의 웹사이트를 만들어볼 계획이다. 코드잇과 함께라면 무엇이든 가능하리라 믿는다. ..