https://getbootstrap.com/ Bootstrap Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins. getbootstrap.com link 복사 Hello, world! 번역된 부트스트랩 https://getbootstrap.kr/ Bootstrap 강력하고 확장 가능하며 기능이 풍부한 프론트엔드 툴킷. Sass로 빌드 및 커스터마이징하고, 사전 빌드된 그리드 시스템 및 구성 요소를 활용하고, ..

relative, sticky는 요소의 원래 자리를 차지하기 때문에 플렉스박스의 영향을 받음 absolute랑 fixed는 요소의 원래 자리에서 쏙 빠져버리기 때문에 글의 흐름에서 빠지는 거랑 마찬가지로, 플렉스박스랑 상관없이 배치됨

..

값이 비어있을 때 보여주는 값 placeholder input::placeholder { color: #dddddd; } 반드시 입력해야 하는 값 required 자동 완성 autocomplete https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

post 방식 데이터 확인 사이트 Request Bin(https://requestbin.com/)

이미지 비디오 자동 재생을 하는 autoplay 속성, 음소거를 하는 muted, 조작하는 버튼들을 보여 주는 controls 속성 오디오 자동 재생을 하는 autoplay 조작하는 버튼들을 보여 주는 controls 속성 iframe 인라인 프레임이라는 뜻으로, 다른 HTML 문서를 문서 안에 집어넣을 때 사용합니다.

Premium Standard Basic 화질 최대 FHD HD 다운로드 무제한 월 30회 불가 ₩15,900 ₩10,900 ₩8,900 table { border: 1px solid red; /* 표 전체의 테두리를 빨간색으로 */ } th { border: 1px solid green; /* 제목 셀의 테두리를 초록색으로 */ } td { border: 1px solid blue; /* 각 셀의 테두리를 파란색으로 */ } table { border: 1px solid red; border-collapse: collapse; /*테두리 겹치기 */ } th { border: 1px solid green; } td { border: 1px solid blue; } table { border: 1px s..

캐스케이드(Cascade) 최종적으로 적용할 CSS 속성들을 결정할 때, 계단식 폭포처럼 CSS 규칙을 순서에 따라 합쳐서 적용하는 걸 의미 스타일 시트의 종류 브라우저에서 기본으로 제공하는 스타일시트(User Agent Stylesheet)는 똑같은 선택자를 쓰고 있다면 우리가 작성한 코드보다 우선순위가 낮습니다. 코드 상의 순서 코드에서 아래 쪽에 쓴 코드일수록 우선순위가 높습니다. 명시도 선택자마다 명시도 점수가 있는데요. 간단히 말해서 아이디 개수, 클래스 개수, 태그 개수를 적어서 점수를 비교합니다. 상속 부모 태그에 적용된 CSS 규칙은 자손에게도 상속되는데요. 모든 속성이 상속되는 건 아니고, 상속되는 속성들이 정해져 있습니다. 상속된 속성의 우선순위 조상 태그들에서 스타일이 모두 계산된 상..

전체 선택자 (Universal Selector) * 라는 선택자는 모든 요소를 선택하는 선택자입니다. 모든 요소를 선택하기 * { box-sizing: border-box; } .gallery의 모든 자식 요소 선택하기 .gallery > * { width: 120px; height: 90px; } n번째 자식 선택자(n-th child Selector) :nth-child()를 사용합니다. 괄호 안에는 숫자나 even, odd, 2n 같은 값이 들어갈 수 있는데요. 혹시 다른 프로그래밍 언어를 쓰신 경험이 있다면 0부터 시작할 거라고 생각하실 수도 있지만, 여기서는 1부터 시작합니다. (첫 번째 자식은 1이고, 세 번째 자식은 3임) .gallery의 세 번째 자식 .gallery :nth-child..

CSS 선택자(CSS Selector) CSS 규칙에서 맨 앞에 적어 주는 걸 CSS 선택자라고 부릅니다. 선택자를 사용해서 이 규칙을 어떤 요소들에 적용할지 선택할 수 있습니다. 선택자 { 선언; 선언; 선언; } 선택자 목록 콤마(,)로 선택자를 연결하면 여러 선택자에 같은 규칙을 적용할 수 있습니다. 선택자1, 선택자2 { ... } 선택자 붙여 쓰기 여러 조건을 동시에 만족하는 요소를 선택하고 싶다면 선택자를 붙여서 쓸 수 있습니다. 예를 들어서 아래 HTML 코드에 있는 태그를 선택해 볼게요. 몽골 대자연으로 떠나는 여행 예시 1. 아이디 + 클래스 #mongolia.title 예시 2. 클래스 + 클래스 .large.title 예시 3. 태그 + 아이디 + 클래스 h2#mongolia.larg..

쿠키의 SameSite 옵션 쿠키에는 이 쿠키가 어떤 도메인에서만 사용할 수 있는지 설정할 수 있는 옵션이 있는데요. 바로 Domain 옵션과 SameSite라는 옵션입니다. 특히 SameSite 옵션은 다음과 같은 세 가지 값을 설정할 수 있습니다. Strict: 반드시 같은 도메인에서만 사용 가능 (하위 도메인 포함) Lax: 같은 도메인에서만 사용 가능하지만, 유저가 링크를 클릭해서 접속하거나 하는 경우에는 다른 도메인에서도 사용 가능 (기본 값) None: 다른 도메인에서도 사용 가능. Secure 옵션과 함께 사용해야 함. 상황 1: SameSite=Strict를 사용하고 같은 도메인인 경우 예를들어서 codeit.kr이라는 사이트에서 api.codeit.kr이라는 백엔드 서버로 리퀘스트를 보내..