whatisthis?

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

Visibility visible | hidden (default) display: none의 경우에는 차지하는 공간마저 없애지만, visibility: hidden을 하면 공간은 그대로 남지만 content만 안보이게함. >> opacity: 0과 유사하게 됨. display:none 영역 사라짐 이벤트(ex.클릭) 작동 안함 tab focus 안됨 visibility:hidden 영역 있음 이벤트(ex.클릭) 작동 안함 tab focus 안됨 뒤에 있는 요소 클릭 가능 opacity:0 >> 존재함! 이벤트고 뭐고 다 됨! 단지 투명할 뿐. 영역 있음 이벤트(ex.클릭) 작동 함 tab focus 됨 뒤에 있는 요소 클릭 불가능 REF > visibility - CSS: Cascading Style ..

Transform /* 키워드 값 */ transform: none; /* 함수 값 */ transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: perspective(17px); transform: rotate(0.5turn); transform: rotate3d(1, 2.0, 3.0, 10deg); transform: rotateX(10deg); transform: rotateY(10deg); transform: rotateZ(10deg); transform: translate(12px, 50%); transform: transl..

Overflow width * height를 갖는 요소 안에 content가 요소의 영역을 벗어났을 경우 사용함. visible | auto | scroll | hidden - default : visible overflow-x, overflow-y 로 나눠서 설정 가능. scroll 콘텐츠를 실제로 잘라냈는지 여부를 따지지 않고 항상 스크롤바를 노출 auto 콘텐츠가 넘칠 때만 스크롤바를 노출 hidden 콘텐츠를 안쪽 여백 상자에 맞추기 위해 잘라냄. 스크롤바를 제공하지 않고, 스크롤할 방법(드래그, 마우스 휠 등)도 지원하지 않음. p { width: 12em; height: 6em; overflow: scroll; } - width, height 설정해준 후, overflow 해주기 .box { ..