๋ชฉ๋ก์ ์ฒด ๊ธ (433)
whatisthis?
(5) Curriculum Section ๐ HTML + CSS ์์ฑ - html ๋งํฌ์ ๊ตฌ์ฑ desktop์์๋ ์ด๋ฏธ์ง๊ฐ ๋ฑ์ฅํจ. row๋ ๋์ค๋ก, col-12(col-md-6) ๋๊ฐ์ฉ ๊ตฌ์ฑํจ. Curriculum Dive into the web development Dive into the software development environment and the basics of computing, networks, and data structures. Apply now Real-World Projects. Solve challenges that professional engineers face as you work individually and in teams with designers. Instr..
(4) Program Section ๐ HTML + CSS ์์ฑ - html ๋งํฌ์ ๊ตฌ์ฑ ์ง๋ ํฌ์คํ ์์ ๋ง๋ strong+h1+p ๊ตฌ์ฑ์ด ํ๊ฐ์ row์๋ค๋ฉด ์๋ก์ด row๋ฅผ ๋ง๋ค์ด์ฃผ๊ณ , col-12๋ฅผ ์ด 3๊ฐ ๋ง๋ค์ด col-md-4 ๋ก ์ง์ ํด์ค๋ค. ์ง๊ธ๊น์ง section.program ์ ๊ตฌ์ฑ์ ์ดํด๋ณด๋ฉด ๋ค์๊ณผ ๊ฐ๋ค. section > container > row > col-12 (col-md-10) > row > col-12 (col-md-4) * 3 index.html Full-Time On Campus Full-Time Remote Part-Time Flex style.css /* Program Page */ .program-card { display: block; text-align: cente..
(4) Program Section ๐ HTML + CSS ์์ฑ - html ๋งํฌ์ ๊ตฌ์ฑ ๋์์ธ์ ๋ณด๋ ์ ๋ชฉ+๋ณธ๋ฌธ ๋ถ๋ถ์ col-12 ์์ col-10์ผ๋ก ์ค์ด๋ค๊ณ , ์๋ ์ด๋ฏธ์ง ์ธ๊ฐ๋ ๋ชจ๋ฐ์ผ์ผ๋๋ col-12 ์ธ๊ฐ์ด๊ณ , ๋ฐ์คํฌํ์ผ๋ col-md-4 ๊ฐ ๋๋๋ก ์ค์ . - ์ถํ์ ๋งํฌ์ ํ ๋ถ๋ถ์ธ Curriculum ๋ถ๋ถ๊ณผ Program ๋ถ๋ถ์ด ๋งค์ฐ ๋น์ทํ๋ค. >> strong, heading, p๋ถ๋ถ์ ๋ชจ๋ํํด์ ์ฌ์ฉํ์! Program Frontend Dev. Immersive Course Your best course for career transformation in front-end developement. This full-time bootcamp features expert instruction..
(3) Service Section ๐ HTML + CSS ์์ฑ - html ๋งํฌ์ ๊ตฌ์ฑ ์ด๋ฒ์๋ desktop์์ (>=768px) col-6์ด ๋๊ฐ๊ฐ ๋๋ฏ๋ก col-12 ๋๊ฐ๋ฅผ ๋ง๋ค์ด์ผํ๋ค. [๊ตฌ์กฐ] container > row > col-12 * 2 ์ฌ๊ธฐ์, col-12 ๋ ๋๋ค col-md-6์ด๋ผ๋ ์์ฑ์ ๊ฐ์ ธ์ผ ํ๋ค. ๐ป bootStrap Breakpoint๋ฅผ ๋ณด๋ฉด md = medium = 768์ด์. Master the Fundamentals while Exploring new Tech We teach cutting-edge tech Full Stack Javascript as well as Computer Science fundamentals. Develop Production Level W..
(2) landing page ๐ HTML + CSS ์์ฑ - ๋ด๊ฐ ์ง์ ์ฝ๋ฉํด๋ณธ ๊ฒ ๐ป index.html Change your carrer, Change your life Get ahead with expert-led training in frontend development Apply now Learn more style.css /* Landing Page */ .landing { width: 100%; height: 100vh; display: flex; flex-direction: column; justify-content: center; text-align: center; background-color: #fdded8; } .landing-title { color: #2b292d; font-s..
(1) ํ๊ฒฝ setting - ํฐ๋ฏธ๋ ๋ช ๋ น์ด touch index.html style.css// ํ์ผ ์์ฑ mkdir assets// ๋๋ ํฐ๋ฆฌ ์์ฑ - font ๊ฐ์ ธ์ค๊ธฐ (import) - ๊ธฐ๋ณธ css ์ ์ฉ (box-sizing์ด๋ font-family ๋ฑ) * { box-sizing: border-box; margin: 0; } body { font-family: "DM Sans", sans-serif; } - ๋ถํธ์คํธ๋ฉ์ grid ์์คํ ๊ฐ์ ธ์ค๊ธฐ ์ง๋๋ฒ์ฒ๋ผ ์๋ ์ฝ๋๋ฅผ ๋ถ์ฌ๋ฃ์ด๋ ๋จ. ํ์ง๋ง ์ฐ๋ฆฌ๋ grid๋ง ์ธ๊ฑฐ๋๊น ์๋ css ํ์ผ์ ์ฐ์! ์ ์ฒด css๋ฅผ ๋ณต์ฌํด์ ์ ํ์ผ ์์ฑํ ํ ๋ถ์ฌ๋ฃ์. grid.min.css .sr-only{position:absolute;width:1px;height:1..
BootStrap (๋ถํธ์คํธ๋ฉ) - ๋ฐ์ํ grid-system ๋๋ฌธ์ ์ ๋ช ! ๐ - CSS Framework. Bootstrap The most popular HTML, CSS, and JS library in the world. getbootstrap.com Quick start ๋๋ฅด๊ณ CSS ๋ผ ์ ํ ๋ถ๋ถ์ ์ฝ๋๋ฅผ copyํ๋ค. >> html ํ์ผ์ head ์ ๋ถ์ฌ๋ฃ์. โ ์ฐธ๊ณ ์ฐ๋ฆฌ๋ ์ง๊ธ grid system๋ง ์ฌ์ฉํ๋ฏ๋ก ๊ทธ๋ฅ ์ link๋ถ๋ถ๋ง ๊ฐ์ ธ์๋ ๋๊ณ , ๋ง์ฝ ์ปดํฌ๋ํธ๋ ๋ค์ํ ๊ธฐ๋ฅ๋ค์ ์ฌ์ฉํ๋ ค๋ฉด scriptํ๊ทธ๋ ๊ฐ์ ธ์์ผ ํ๋ค. ๊ทธ๋ฅ ์๋ฌด๊ฒ๋ ์ค์ ์ํด๋ bootstrap์ด ๊ธฐ๋ณธ ์ ๊ณตํ๋ reset style์ ์ํด ๊น๋ํ๊ฒ ๋์จ๋ค! grid-system ๊ธฐ๋ณธ ๊ตฌ์กฐ container ์..
Grid System - ๋์์ด๋๊ฐ ์น ๋์์ธ์ ํ ๋ ๊ทธ๋ฆฌ๋ ์์คํ ์ ์ด์ฉํด์ ๋์์ธ์ ํ๋ค. container column gutter ์ฌ๊ธฐ์ ํ๋์ ์ ์ฒด์ ํด๋นํ๋ ๊ฒ์ด container, hotpink์ ์นธ ํ๋์ ํด๋นํ๋ ๊ฒ์ด column์ด๋ค. ์ฃผ๋ก ๊ทธ๋ฆฌ๋๋ 12์นธ์ง๋ฆฌ๋ฅผ ๋ง์ด ์ฌ์ฉํ๋ค. column์ ํตํด ์์์ width๋ฅผ ์ค์ ํ๋ค. (์> 3์นธ์ง๋ฆฌ, 6์นธ์ง๋ฆฌ ๋ฑ column์ ๊ธฐ์ค์ผ๋ก ์ก์) gutter์ ์์๊ฐ์ ์ฌ๋ฐฑ์ ์ฃผ๋ ๊ฒ. = ๊ฐ๊ฒฉ์ ์ํ ์ฌ๋ฐฑ์ ์ค. ๐ก ์ด๋ฌํ grid-system์ ๋ฐ์ํ์ผ๋ก ํด์ค framework ===== Bootstrap! ref https://edu.goorm.io/learn/lecture/20583
1. ๊ธฐ๋ณต์ ์ผ๋ก, ๋์ค์ ์ค๋ ์ ์ธ์ด ๋ฎ์ด์ 2. ์ ํ์ ์ฐ์ ์์ ์ ํ์ ์ฐ์ ์์ ์์ ์ ํ์ ์ ๋ง ์ด์ฉ์ ์์๋๋ง ์ฌ์ฉํ ๊ฒ. ์์ข์๊ฑฐ์. 1 / ์ธ๋ผ์ธ ์คํ์ผ ์ ์ฉ hello > ์ด๋ ํ ์คํ์ผ๋ณด๋ค ๊ฐ์ฅ ๊ฐ๋ ฅํ ์ ์ฉ๋จ. 2/ !important ์ ์ธ - ์ธ๋ผ์ธ ์คํ์ผ๋ณด๋ค ๋ ๊ฐ๋ ฅํจ. - ๋ฌด์จ์ผ์ด ์์ด๋ ์ด๊ฑธ ์ ์ฉํ๋ผ๋ ๋ป. - ์ฌ์ฉ ์์ ํ๋๊ฒ์ด ์ข์. * { color: red !important; } ref lecture. https://edu.goorm.io/learn/lecture/20583
CSS - Selector 1 / ์์, ํด๋์ค, ID ์ ํ์ 2 / ์์, ์์, ํ์ ์ ํ์ 3 / ๊ตฌ์กฐ์ ๊ฐ์ ํด๋์ค ์ ํ์ 4 / ๋์ ๊ฐ์ ํด๋์ค ์ ํ์ 1 / ์์, ํด๋์ค, ID ์ ํ์ Type Selector - HTML ํ๊ทธ ์ด๋ฆ์ผ๋ก ์ ํ์ ์์ฑ span { color : #0066ff; font-size: 16px; font-weight: 500; } Class Selector - HTML์ class์์ฑ์ ์์ฑ๊ฐ์ ์ฌ์ฉ .stop-button { color : #0066ff; border: none; } class๋ ์ค๋ณต ์ ์ธ ๊ฐ๋ฅํ๋ฏ๋ก ๊ฐ์ ํด๋์ค์ ๋์ผํ ์คํ์ผ์ ํ๊บผ๋ฒ์ ์์ฑ ๊ฐ๋ฅํ๋ค. ๋ฐ๋๋ก, ํ ์์์ ์ฌ๋ฌ ํด๋์ค๋ฅผ ๊ฐ์ง ์๋ ์๋ค. ๋ง์ฝ, class1์ด๋ฉด์ class2๋ฉด์ ..