IT/HTML&CSS37

• 

  [HTML]HTML img 요소 목차 HTML img 요소 브라우저는 다른 HTML 요소와는 조금 다른 식으로 img 요소를 처리함 HTML 페이지를 읽고 난 후 웹 서버로부터 각 이미지를 회수한 뒤 보여줌 만약 웹페이지에 큰 이미지가 한 개 이상 있다면 섬네일(큰이미지를 보기 위해 사용자들이 클릭할 수 있는 작은 이미지)을 생성하여 웹 페이지를 좀 더 유용하게 하고 내려받는 속도를 빠르게 할 수 있음 웹 브라우저가 널리 지원하는 이미지의 형식으로는 JPEG, PNG, GIF가 있고 JPEG 형식은 사진이나 다른 복잡한 이미지에 적합 GIF나 PNG형식은 로고나 단색으로 구성된 간단한 그래픽과 선, 텍스트에 적합 JPEG 이미지는 다양한 품질로 압축될 수 있고 필요한 정도에 따라 파일 크기와 품질 사이에 최적의 균형을 맞추어서 사용하길.. IT/HTML&CSS 2022. 11. 30.

• [HTML]html5에서 추가된 새 요소중 중요한 요소 목차 html5에서 추가된 새 요소중 중요한 요소 article: 블로그 포스트, 사용자 포럼, 신문기사처럼 페이지에 있는 독립적인 콘텐츠를 표현 nav: 페이지에서 내비게이션 링크를 의미하는 콘텐츠를 포함 header: 페이지 상단이나, 페이지의 한 구간의 상단에 있는 콘텐츠 footer: 페이지 하단, 혹은 한 구간의 하단에 있는 콘텐츠 aside: 설명메모나 사이드바처럼, 페이지 콘텐츠에 대한 보충정보를 나타내는 콘텐츠를 포함 section: 보통 header나 footer와 함께 주제별로 콘텐츠를 모아 놓은 것 time: 날짜나 시간, 혹은 이 둘 모두를 포함 video: 페이지에 비디오 미디어를 추가할 때 사용 section과 article이 햇갈릴 수 있는데 관련된 콘텐츠를 묶을 때는 sect.. IT/HTML&CSS 2022. 11. 30.

• [HTML]video 요소 목차 video 요소 페이지에 동영상 콘텐츠를 추가할 때 사용되며 사용방법은 video controls autoplay width="512" height="288" src="video/test.mp4" 속성 - controls: 비디오와 오디오 재생을 조정하는 컨트롤을 제공(브라우저에 따라 다름) - autoplay: 속성명에서도 유추 가능하듯 이 속성 명시할 경우 페이지가 뜨자마자 동영상이 자동 재생됨 - poster: 비디오가 시작되지 않을 경우 포스터 이미지를 보여줄 수 있음, img요소의 alt와 비슷한 역할 - id: 아이디 추가해서 스타일 가미 가능 - src: img요소의 src와 흡사한데, 비디오 파일 원본의 위치가 담긴 url을 설정 - preload: 보통 최적화를 목적으로 비디오를 어.. IT/HTML&CSS 2022. 11. 30.

• 

  [HTML]html fieldset & legend 목차 html fieldset & legend html의 form이 더 커지기 시작하면 요소를 시각적으로 묶는 것이 도움이 되는데 이때 사용하는 것이 fieldset과 legend요소임 field요소는 input요소의 세트를 둘러싸고, legend는 input 그룹에 대한 라벨을 제공 selectbox에서 다중 선택이 필요할 경우 select 태그에 multiple을 추가하면 됨 해당 필드를 필수입력으로 해야 할 경우 태그에 required을 추가하면 됨 html은 플러그인 없이도 audio요소를 사용해 페이지에서 오디오를 재생하는 표준방법을 제공하고 있음 사용방법은 video요소와 매우 흡사함 audio src="songs/최재훈-비의랩소디.mp3" id="boombox" controls(볼륨 조절, .. IT/HTML&CSS 2022. 11. 30.

• [CSS]css 속성 표기법 목차 css 속성 표기법 padding-top: 0px; padding-right: 20px; padding-bottom: 30px; padding-left: 10px; ==> padding: 0px(위); 20px(오른쪽); 30px(아래); 10px(왼쪽); padding과 margin 둘다 같은 속기법 사용 가능 만일 padding이나 margin이 모든 방향에서 같은 값을 가지면 padding: 20px(위, 오른쪽, 아래, 왼쪽 모두 같은 값) 이런식으로 작성할 수 있음 padding이나 margin을 단축하는 또 다른 방법: 위아래가 동일하고 우측과 좌측이 동일한 경우 ==> padding: 0px(위, 아래) 20px(우,좌); 속기법 암기를 위해서는 속기법 순서가 시계방향으로 된다고 생각... IT/HTML&CSS 2022. 11. 30.

• [CSS]css 레이아웃 목차 css 레이아웃 떠 있는 레이아웃: float 사용, 단점은 div전체를 옮겨야 한다는 점과 두개의 컬럼을 만들수 없다는 점 젤로 레이아웃: 페이지에 있는 모든 콘텐츠 주위를 고정된 크기의 div로 감싸고 고정된 레이아웃을 만든 후, margin을 auto로 설정해서 좌우에 동일한 너비의 margin이 있고 가운데 content영역이 있다는 점(많은 블로그가 이런 형태), 단점은 콘텐츠가 브라우저창 전체를 채우려고 확장되지 않는 다는 점이지만 이를 단점이라고 생각하지 않는 사람도 많다고 함 출처 : Head First HTML and CSS(개정판) IT/HTML&CSS 2022. 11. 30.

• 

  [CSS]CSS table display 목차 CSS table display display 속성값으로 table, table-row, table-cell등을 사용해서 요소를 표(table)처럼 표현하는 방법 참조 url: https://www.codingfactory.net/10776 ① 테이블 전체를 나타내는 div를 생성 후 이 div내에 행과 컬럼을 중첩시킴 ② 테이블의 행별로 행 콘텐츠를 포함할 div를 생성 ③ 컬럼처럼 동작할 블록요소(div)를 위의 div안에 넣음 ④ CSS에서 전체 테이블에 해당하는 div의 display를 table로 설정, 테이블의 행에 해당하는 div의 display를 display-row로 설정, 행의 컬럼에 해당하는 div의 display를 display-cell로 설정 아래는 간단한 예시 마크업 아래는.. IT/HTML&CSS 2022. 11. 30.

• [CSS]css 선택자 결합 & 복잡한 선택자 사용법 목차 css 선택자 결합 & 복잡한 선택자 사용법 선택자 결합 & 복잡한 선택자 사용법 ① 아래와 같이 선택하고자 하는 요소에 대한 구문을 먼저 정의함 div#greentea > blockquote: 아이디가 greentea인 div의 자손선택자 중 blockquote를 선택 ② 그리고 선택하려는 요소를 놓음 div#greentea > blockquote p(요소): blockquote의 구문에 선택하려는 요소인 p요소를 추가(이 p요소는 blockquote의 자손이어야 하며, greentea란 id를 가진 div의 자식이어야 함) ③ 그리고 의사클래스나 의사요소를 명시함 div#greentea > blockquote p:first-line {font-style: italic;} ==> id가 green.. IT/HTML&CSS 2022. 11. 30.

• 

  [CSS]css 변형(transform) & 트랜지션(transition) 목차 변형(transform) & 트랜지션(transition) ex) 마우스를 요소 위로 가져갈 경우 회전하게 하는 등의 효과 이 경우 요소위로 마우스를 가져갈 경우 바로 회전하기 때문에 투박스러움 위의 이미지를 좀 더 부드러운 에니메이션 효과를 주기위해서 아래와 같이 트랜지션 적용 출처 : https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms#%ED%9A%8C%EC%A0%84 IT/HTML&CSS 2022. 11. 30.

• 

  [CSS] 티스토리 블로그 스킨 편집_글꼴(폰트) 바꾸는 방법 어제 블로그를 정리하다가 스킨을 바꿔봤는데, 티스토리의 기존 스킨에서 글꼴(폰트)를 변경하고 싶었다. 내일배움카드로 배웠던 CSS의 지식을 되살려 결국 원하는 폰트로 바꾸는 데 성공하였다. 이 방법을 공유한다. :-) 먼저, 티스토리 관리자 페이지에서 스킨 변경을 하는데, 내가 선택한 스킨은 "letter"이다. 원하는 글꼴을 찾아 폰트 다운로드 url 코드를 복사한다.(나는 눈누 글꼴 사이트에서 가져왔다. https://noonnu.cc/) 내가 원하는 폰트는 서평원 꺾깎체로 폰트를 클릭하면 복사할 수 있는 url 코드가 나온다. 이제 스킨 편집을 눌러서 CSS 화면을 클릭하여 복사한 폰트(웹폰트로 사용) url 코드를 붙여넣는다. 이전에 작성했던 글의 하단 부분을 참고하면 font-face에 대해 자.. IT/HTML&CSS 2021. 12. 22.