neda의 블로그

외부 디스플레이 유형 block 새로운 라인으로 넘어간다. 크기 속성 width, height 속성이 가능하다. padding, margin, border가 다른 요소에 영향을 준다. 일반적으로 100% 공간을 차지한다. inline 새로운 라인으로 넘어가지 않는다. 크기 속성이 적용 되지 않는다. 수직 padding, margin, border가 적용은 되나 다른 요소에 영향을 주지 않는다. 수평 padding, margin, border가 다른 요소에 영향을 준다. 내부 디스플레이 유형 flex 외부 디스플레이 속성은 block를 유지 내부 자식 요소를 flex 항목으로 설정 flexbox 레이아웃 박스 영역 Content : 콘텐츠 표시 영역 Padding: 콘텐츠와 보더 사이의 공백 Border:..

자손 결합자 첫 번째 선택자의 아래에 존재하는 모든 두 번째 선택자 선택 단일 공백(" ")으로 표시 body div { background-color: red;} 자식 결합자 첫 번째 선택자의 바로 아래에 존재하는 모든 두 번째 선택자 선택 보다 큼 기호(>)로 표시 body > div { background-color: red;} 인접 형제 결합자 첫 번째 선택자의 바로 뒤에 오는 요소가 두 번째 선택자와 일치하면 선택 더하기 기호(+)로 표시 제목(h1) 바로 뒤에 오는 단락(p) 선택 h1 + p { color: #ccc;} 일반 형제 결합자 첫 번째 선택자의 형제 중 두 번째 선택자와 일치하면 선택 물결표(~)로 표시 제목(h1) 과 형제 관계인 모든 단락(p) 선택 h1 ~ p { color:..

Universal 선택기 - * * { color: black;} Type 선택자 - 타입명 {} p {color: red;} Class 선택기 - .클래스이름 .myClass { color: red;} Id 선택기 - #아이디이름 #myId { color: red;} attribute 선택기 - 타입[속성="속성값"] presence, value 선택기 선택자 예시 설명 [attr] a[href] 해당 요소에 해당 속성이 존재하는 경우 [attr=value] a[href="#"] 해당 요소에 해당 속성의 값이 일치하는 경우 [attr~=value] a[class~="myClass"] 해당 요소에 해당 속성의 값이 일치하거나 (공백으로 구분된) 값 목록에 포함되는 경우 (ex. class="myClass..

cascading의 사전적 의미로는 ' 종속, 상속, 폭포' 등이 있다. CSS는 이 세 가지가 핵심이라 할 수 있다. 종속(Cascade) 먼저 CSS는 동일한 규칙의 경우 나중에 적용되는 규칙이 적용된다. 아래를 보면 같은 태그에 대해 같은 속성을 사용한 규칙에서 늦게 정의된 blue color가 적용된다. what color? HTML 삽입 미리보기할 수 없는 소스 특이성(Specificity) 특이성은 다른 선택자를 통해 같은 요소를 지목하고 있을 때, 더 특이성이 높은 선택자에서 정의한 속성이 적용되는 것이다. 아래의 코드에서 보면 'p'라는 요소 선택자 보다는 '#red'라는 아이디 선택자가 더 구체적이기 때문에 더 특이성이 높다고 판단하여 먼저 정의되었음에도 불구하고 red color가 적용..

HTML 삽입 미리보기할 수 없는 소스

구문 property: calc(expression); 아래의 경우처럼 260/3을 할 경우 86.666...으로 나누어 떨어지지 않을 때 유용 속성 값을 직접 계산하지 않고 수식을 입력하면 알아보기 더 편하다. 86.666666px로 할 경우 므슨 뜻인지 한 눈에 알기 어렵다. 계산 가능한 연산자 + - * / HTML 삽입 미리보기할 수 없는 소스

테이블 태그: 테이블의 행(row) 태그: 테이블의 열(column) 태그: 테이블 헤더 태그: 테이블 열 그룹 태그: 테이블 열 태그: 테이블 설명 추가 -> 테이블 태그 내에 포함 테이블 구조를 위한 태그: , , 해당 헤더가 어떤 셀에 대한 정보인지 명시적으로 전달: scope="col" or scope="row" HTML 삽입 미리보기할 수 없는 소스 Table example Animals we keep Knocky Flor Ella Juan Breed Jack Russell Poodle Streetdog Cocker Spaniel Age 16 9 10 5 Owner Mother-in-law Me Me Sister-in-law Eating Habits Eats everyone's leftovers..

반응형 이미지의 필요성 일반적으로 웹은 가로가 넓은 형태의 모니터와 같은 스크린을 고려하지만, 모바일 기기의 증가와 함께 다양한 화면 비율, 화면 크기를 가진 디바이스에 대한 알맞은 지원이 필요하다. 모바일기기에서 웹을 볼 때는 보통 세로 화면으로 보기 때문에 모니터와 달리 세로에 비해 가로가 매우 좁다. 또한 화면 크기가 작기 때문에 데스크탑에서 보던 고해상도의 이미지를 똑같이 다운받아 표시하는 것은 대역폭 낭비일 수 있다. 가로가 넓은 이미지를 모바일기기에서 보여줄 때에는 전체를 다 보여줄 수도 있지만, 중요 부분만을 크롭하여 보여주는 방법도 있다. 반응형 이미지 만들기 srcset 설명 elva-fairy-480w.jpg --> 이미지 파일 480w --> 이미지 실제 크기 sizes 설명 (max..

래스터 이미지 각각의 픽셀이 나타내야 할 색에 대한 정보를 가짐 이미지 크기 고정 -> 확대시 화질 저하 벡터 이미지 벡터 정보를 통해 그때 그때 알고리즘을 계산, 알맞게 이미지를 렌더링 이미지 크기 가변적 -> 확대시 화질 저하 없음 단점 특정 복잡한 이미지 벡터로 구현하기 어려움 이미지가 복잡해지면 벡터가 매우 많아짐 -> 파일 크기 증가, 렌더링 시간 증가 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 svg를 추가하는 방법 1. 요소 장점 alt 사용 가능 를 통한 하이퍼 링크 가능 브라우저에서 캐시 가능 단점 js로 조작 불가능 외부 스타일시트로 css 불가능 css 의사 클래스 불가능 2. 요소 장점 css 스타일, 상호작용, 애니메이션 가능 를 통한 하이퍼 링..

: 다른 HTML 페이지 중첩하는 브라우징 컨텍스트 youtube iframe 예시: HTML 삽입 미리보기할 수 없는 소스 HTML iframe 예시: HTML 삽입 미리보기할 수 없는 소스 기본적인 적용사항 border : none 브라우저에서 기본적으로 표시하는 테두리 제거한다. allowfullscreen 전체화면 기능을 가능하게 한다 Fallback content chlidren 값으로 대체 컨텐츠를 넣어 iframe이 지원하지 않을 때 표시 blog home page sandbox 강화된 보안 설정 HTTPS 필요성 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스