YoonStudyNote

srcset은 브라우저에 제시할(사용할) 이미지들과 그 이미지들의 원본 크기를 지정한다. 사용할 이미지를 사이즈별로 2장 이상 준비하여 srcset 속성에 작성한다. 단, 주의사항은 이미지의 크기로 px단위가 아닌 w 디스크립터 혹은 x 디스크립터를 입력해야 하며, 작은 크기 이미지부터 순서대로 입력한다. 1. W unit w단위 (width descriptor)는 이미지의 원본 크기(가로 너비)를 의미한다. 예를들어 400X300(px)크기의 w의 값은 400w 이다. 2. X descriptor x 디스크립터(Device pixel ratio descriptor)는 이미지의 비율 의도를 의미한다. 위 w 디스크립터에서 사용했던 예제를 다음과 같이 수정할 수 있다.

속성 의미 값 특징 srcset 브라우저에게 제시할 이미지 URL과 크기의 목록을 정의 w, x sizes 미디어 조건과 해당 조건일 때의 이미지 크기를 정의 보통 srcset과 sizes는 반응형 웹을 제작할 때 많이 사용한다. 일반적으로 반응형 웹에서 이미지를 지원하기 위해, ‘미디어쿼리’라고 부르는 CSS Media Rule(@media)에서 background-image 속성을 많이 사용하는데, 반응형 이미지를 처리하기 위해 뷰포트(Viewport)의 크기부터 사용자 화면의 해상도 등 많은 환경을 고려해야 합니다. 하지만 우리는 HTML IMG의 srcset과 sizes를 통해 쉽게는 이미지의 크기를 설정하는 것만으로 대부분의 고려 사항을 사용자 브라우저(User agent)에 떠넘길 수 있습니다.

이미지를 삽입. 속성 의미 값 특징 src (필수) 이미지 URL URL alt (필수) 이미지의 대체텍스트 width 이미지의 가로 너비 height 이미지의 세로 너비 srcset 브라우저에게 제시할 이미지 URL과 크기의 목록을 정의 w, x sizes 미디어 조건과 해당 조건일 때의 이미지 크기를 정의 crossorigin 가져 오기가 CORS를 사용하여 수행되어야하는지 여부 anonymous, use-credentials ismap 서버 측 이미지 맵으로 지정해 클릭하여 좌표를 쿼리스트링으로 서버에 전송할지 여부 Boolean 가 유효한 href 속성을 가진 의 하위 요소인 경우에만 허용 usemap 클라이언트 측 이미지 맵으로 지정 의 ID속성 값 , 의 하위 요소인 경우 사용 불가 크기를 조..

1. 삭제된(변경된) 텍스트의 범위를 지정. 속성 의미 값 cite 변경을 설명하는 리소스의 URI URI datetime 변경이 일어난 유요한 날짜 문자 Date del {display : inline;} 기존에는 있었지만, 나중에 시간이 지나고 보니까 필요가 없을것 같은 부분. 하지만 완전히 삭제하지는 않고 흔적을 남기는 방법이 이것이다. 그래서 지울때 속성을 쓰고 왜 지웠는지 설명을 하는것을 넣어야 한다. 2. 새로 추가된(변경된) 텍스트의 범위를 지정. 속성 의미 값 cite 변경을 설명하는 리소스의 URI URI datetime 변경이 일어난 유요한 날짜 문자 Date ins {display : inline;} 기존에 없었는데, 새로 생길때 사용한다. 새로 생긴 정보가 있으면 속성을 이용해서 설..

줄바꿈을 설정. br { display: inline; } html에서 br태그를 여러번 쓰는것은 절대 안된다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 이렇게 하는것이 아닌, 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 p{ line-height : 50px; } 이런식으로 CSS를 이용하여, 한 문단 단락(줄의 높이)을 50px 크기로 잡아서 설정하는것이 좋다.

본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정. span {display : inline} span div 아무런 의미 없는 콘텐츠 영역 설정 아무런 의미 없는 콘텐츠 영역 설정 inline block 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 span은 보통 한 문장에서 한글자를 스타일링 할 때 사용된다. 예를들어서 밑에 소스코드를 보면 된다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 .bold{ font-weight: bold; font-size: 20px; color : red; }

날짜나 시간을 나타내기 위한 목적으로 사용. IE 지원불가 속성 의미 값 datetime 유효한 날짜 문자 Date The Cure will be celebrating their 40th anniversary on July 7 in London's Hyde Park.

위 첨자()와 아래 첨자()를 설정. (Superscripted text, Subscript text) X4 + Y2, H20 sup, sub {display : inline;}

텍스트 입력 장치(키보드)에서 사용자 입력을 나타내는 텍스트 범위를 설정한다. (Keyboard Input) Ctrl + Alt + K, ESC 다음과 같이 입력을 한다면 keyboard가 무엇인지 브라우저에게 인식을 시켜준다. 하지만 사람들이 보기에는 키보드가 아니라고 생각할 수 있으므로 css에 디자인을 입혀서 보여주기도 한다. kbd{ padding : 0 3px; border-radius: 3px; border-top : 2px solid black; border-bottom : 2px solid red; border-left : 2px solid blue; border-right : 2px solid green; }

컴퓨터 코드 범위를 설정. (Inline Code) 기본적으로 고정폭(Monospace)글꼴 계열로 표시됨. documnet.getElementById('id-value') is a piece of computer code. code {display : inline;} 사용자들에게 어디 부분이 코드 부분인지 인지 시켜주기 위해서 글꼴이 바뀌어서 보여준다.