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면서 ..