Programming Language/HTML & CSS

1. 내가 만든 css가 부트스트랩이 만든 css 보다 밑에 가있어야 하기 때문에 부트스트랩에서 복사한 CDN 링크를 7번 자리에 붙여넣어준다. ★★★ 내 스타일은 항상 부트스트랩 스타일 뒤에 ★★★ 2. 자바스크립트 링크 복사해 바로 앞에 붙여넣기 부트스트랩 스타일 덮어쓰기 1. 바꾸고싶은 부트스트랩 스타일 이름 가져오기 2. css 에서 똑같은 스타일 이름을 만들고 그 스타일 밑으로 내가 하고싶은 스타일 쓰기 3. 만약 적용이 안된다면, 내 style.css가 부트스트랩 CDN 링크보다 밑에 있는 꼭! 확인하기 사진 넘어가는 대문(?) 만들기 부트스트랩 - Carousel 글자 크기 조정 paraghraph 문단, 밑에 공간이 있다 footer 미디어쿼리로 만들기 모바일 버전일때 부트스트랩이 제공하는..

https://getbootstrap.com/docs/5.1/layout/grid/ Grid system Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, six default responsive tiers, Sass variables and mixins, and dozens of predefined classes. getbootstrap.com 1. 부트스트랩 페이지에 들어가 introduction에 있는 CSS 코드를 에 복사-붙여넣기 하기 (CDN) 2. 둘 중 하나 선택하여 태그 바로 앞에 복사-붙여넣기 실습 이렇게 부트스트랩에서 순서대로..

첫 틀 짜기 & 의미론적인 태그 1. 웹사이트 만들 때 크게 3등분 하여 틀을 잡는다. (nav / main / footer) 거의 모든 웹사이트가 이렇게 정형화 되어있다보니 개발자들은 편의를 위해 '의미론적인 태그' 를 만들게 되었다! 2. 모든 걸 태그가 아닌 의미론적인 태그를 사용해 크게 3등분을 하고 그 안에 세세한 것을 태그로 나누기! 3. 의미론적인 태그에 style 적용은 .을 찍지않고 그대로 작성해준다 (그 자체로 태그이기 때문) 4. 페이지에 전체적으로 적용되는 스타일은 따로 스타일을 안만들고 body {} 에 넣어주기 전체적으로 적용되지않고 따로 꾸밀 부분은 당연히 따로 스타일을 만들어주기 내 PC에 있는 이미지 첨부하기 : 상대경로 절대경로 절대 경로 : 최초의 시작점으로 경유한 경로..

Position 1. static : 기본 속성값, top right bottom left 등 위치 속성은 무시됨 2. relative : HTML 태그가 있는 위치에서 top right bottom left 값을 통해 움직임 (지금 있는 위치에서 움직임) 3. absloute : 부모영역에서 top right bottom left을 이용해 주어진 위치로 움직임 * 단! 여기서 부모란? 부모 태그가 relative, absolute, fixed 속성 중 하나여야 한다. 만약 부모태그가 해당 속성을 가지고 있지 않다면 body 태그 기준으로 움직인다. 왜냐? body 태그는 relative를 기본 속성으로 가지고 있기 때문. 4. fixed : 스크롤을 내려도 그 위치에 고정! (무조건 브라우저 창 기준)..

개발자툴 여는 법 (크롬 브라우저) 1. 웹사이트에서 마우스 오른쪽 클릭 2. 맨 마지막에 있는 inspect 또는 검사 클릭 아이콘 fontawsome 웹사이트 : https://fontawesome.com/ Font Awesome The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome. fontawesome.com CDN (Content Delivery Network) 이란? 웹 페이지, 이미지, 비디오 등의 콘텐츠를 사용자의 물리적 위치와 가까운 프록시 서버에 캐싱한다. 이렇게 하면 콘텐츠가 로딩될 때까지 기다릴..

https://replit.com/~ Sign Up Run code live in your browser. Write and run code in 50+ languages online with Replit, a powerful IDE, compiler, & interpreter. replit.com HTML이란 건물에 비유하자면 뼈대의 개념 CSS란 그 안의 인테리어 개념 * 꼭 외워야 할 태그 : 영역을 나누어준다 : 문단을 나누는데 쓰임 (div 태그와 거의 비슷한 용도이나 밑에 공간이 좀 더 생기는 차이점) : 웹사이트의 이미지를 가져옴 img 태그는 하나만 있다 (단일태그) 속성값 src를 갖는다 src는 이미지 주소를 갖는다 : 사용자에게 입력을 받는 단일태그 input 태그는 type 이라는 ..