본문 바로가기

분류 전체보기

(17)
취업특강 - 기업분석을 통한 이력서 및 자기소개서 특강 보호되어 있는 글입니다.
코드잇 - 코딩의 민족 그리드 ↓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 { ..