본문 바로가기

coding study

(14)
코드잇 - 코딩의 민족 그리드 ↓css @font-face { src: url("../fonts/BMJUA_otf.otf"); font-family: BMJUA; } * { box-sizing: border-box; font-family: BMJUA; color: #58595b; } body { background-color: #f0e8d9; } h1 { text-align: center; font-size: 64px; margin-top: 76px; } h2 { text-align: center; font-size: 32px; margin-top: 30px; margin-bottom: 75px; } .food-container { width: 660px; margin-left: auto; margin-right: auto; } .i..
코드잇 코딩캠프 7기 (6/23 ~ ) - 28일 차 공부기록 (웹 퍼블리싱 2. HTML/CSS 핵심개념 - 신문광고, 그리드 연습) *float margin 을 써주면 텍스트와 이미지가 너무 가까울 때 간격을 줄 수 있다. *신문광고 ↓html 4차 산업혁명의 시대, 소프트웨어 교육은 필수 코드잇 강영훈 대표 '소프트웨어 강국되려면 컴퓨터적 사고방식 필요해' "누구나 프로그래밍을 배워야한다. 사고하는 방법을 가르쳐주기 때문이다." 故 스티브잡스 애플 창업자가 했던 말이다. 소프트웨어는 4차 산업혁명의 흐름이다. 인공지능, IoT, 빅데이터, 3D프린팅, 가상 현실, 증강현실 등 모두 소프트웨어와 긴밀한 연관성을 갖고 있는 분야이다. 미래의 흐름에 발맞춰 정부는 2018년부터 초, 중, 고등학교에서 소프트웨어 교육을 전면 실시할 계획이다. 이에 앞서 지난해와 올해 미래부, 교육부에서 900개의 연구기관 및 선도학교를 정해 교육하고 있다..
코드잇 코딩캠프 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 ~ ) - 24일 차 공부기록 (웹 퍼블리싱 2. HTML/CSS 핵심개념 - 이미지버튼, 내비게이션 바 로고) display의 종류 모든 요소는 딱 한 개의 display 값 가짐, 가질 수 있는 display의 종류는 inline block inline-block flex list-item none 등 여러 가지가 있는데, 대부분의 요소들은 inline과 block 중 한 가지 inline display inline 요소들은 다른 요소들과 같은 줄에 머무르려고 하는 성향 & 필요한 만큼의 가로 길이만 차지하는 성향 O 다음 요소들은 기본 display 값이 inline block display block 요소들은 다른 요소들과 독단적인 줄에 가려고 하는 성향 & 최대한 많은 가로 길이를 차지하는 성향 O 다음 요소들은 기본 display 값이 block , , , , , inline 요소 → block i { ..
코드잇 코딩캠프 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 ~ ) - 22일 차 공부기록 (웹 퍼블리싱 2. HTML/CSS 핵심개념 - 마우스오버) * 선택자 정리 - 자식 , 직속자식 , (모르는 것만) 1. 자식 ( .div1 i ) Outside Inside 1 Blah blah Inside 2 Inside 3 /* 'div1' 클래스를 갖고 있는 요소의 자식 중 모든 태그 */ .div1 i { color: orange; } 2. 직속자식 ( .div1 > i ) Outside Inside 1 Blah blah Inside 2 Inside 3 /* 'div1' 클래스를 갖고 있는 요소의 직속 자식 중 모든 태그 */ .div1 > i { color: orange; } 3. 복수선택 ( .two, .four ) Outside 1 Outside 2 Inside 1 Inside 2 Inside 3 Inside 4 Inside 5 /* 'two' 클..
코드잇 코딩캠프 7기 ( 6/23 ~ ) - 21일 차 공부기록 (웹 퍼블리싱 2. HTML/CSS 핵심개념 - 코딩의 민족) * 코딩의 민족 ↓index.html 냠냠의 민족 넌 냠냠할 때가 제일 이뻐 달콤달달 양념치킨 주머니가 가벼운 당신의 마음까지 생각한 착한 가격! 바로 결제 싱싱 스시 주머니가 가벼운 당신의 마음까지 생각한 착한 가격! 바로 결제 냠냠 햄버거 주머니가 가벼운 당신의 마음까지 생각한 착한 가격! 바로 결제 알록달록 비빔밥 주머니가 가벼운 당신의 마음까지 생각한 착한 가격! 바로 결제 ↓css @font-face { src: url("../fonts/BMJUA_otf.otf"); font-family: BMJUA; } * { box-sizing: border-box; font-family: BMJUA; color: #58595b; } body { background-color: #f0e8d9; } h1 { ..
코드잇 코딩캠프 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로 각각 ..