whatisthis?

(7) Footer Section 📌 HTML + CSS 작성 - html 마크업 구성 매우 간단! col-12 짜리 세개만들기. index.html Terms Privacy License style.css /* Footer Page */ .footer { padding: 24px 0; } .footer-link { margin-bottom: 8px; } .footer-link:last-child { margin-bottom: 0; } .footer-link a { font-size: 14px; line-height: 1.71428571; letter-spacing: -0.01em; color: #807f81; } +) media query (Desktop) /* footer */ .footer-link..

(6) Subscription Section 📌 HTML + CSS 작성 - html 마크업 구성 이번에는 section 말고 aside로 감싸주자. 디자인시안을 보면, image부분과 나머지 title+p+form 부분으로 나눠지고, col-12(col-md-5)와 col-12(col-md-7)로 나눈다. row를 나누는 기준은 ??? - 줄바꿈 하면 row 따로 적기. 이번엔 같은줄에 있으므로 row>col+col index.html Stay with us Subscribe to our email newsletter to stay up to date on the latest updates Get started Cancel any time. Check out Terms of Use. 나중에 input을..

(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..