HTML & CSS27 [CSS 기초] 블럭(블록) 및 인라인 요소 안녕하세요 PNcoding입니다 :) 이번 포스팅에서는 css의 block(블럭) , inline(인라인) 모델에 대하여 알아보도록 하겠습니다. 이러한 block(블럭) , inline(인라인) 모델을 이해한다는 것은 css를 사용하여 레이아웃을 구성하거나 콘텐츠들을 정렬하기가 쉬워진다는 의미라 할 수 있습니다. 1. 블럭 요소 (block element) 1-1. 태그의 가로 크기는 브라우저의 좌우 공간을 가득 채우며 존재 .box { height: 100px; background-color: lightblue; } 앞의 코드를 작성하시면 가로크기를 지정하지 않았음에도 불구하고 브라우저 가득 가로크기가 채워지는 것을 확인할 수 있습니다. (세로크기가 없으면 브라우저에 박스의 크기가 표현되지 않으니 세로.. 2023. 11. 6. [CSS 기초] css 배경 속성 안녕하세요 PNcoding입니다 :) 이번 포스팅에서는 css 배경 관련 속성에 대하여 알아보도록 할게요 :) css의 기초라 할 수 있는 선택자에 관련된 내용은 앞 포스팅을 참고해 주시면 되겠습니다. https://pncoding.tistory.com/12 [CSS 기초] css 선택자 (1) 태그, 클래스, 아이디 선택자 안녕하세요 PNcoding입니다 :) 이번 포스팅에선 CSS를 처음 사용하기 위해 필수인 선택자에 대해 알아보도록 할게요! *선택자 란? HTML의 태그를 선택하는 방법으로 원하는 태그를 선택 후 스타일을 pncoding.tistory.com https://pncoding.tistory.com/14 [CSS 기초] css 선택자 (2) 구조, 자식, 자손 선택자 안녕하세요 PNcod.. 2023. 11. 3. [CSS 기초] css 선택자 (2) 구조, 자식, 자손 선택자 안녕하세요 PNcoding입니다 :) 지난 포스팅에선 태그 ,클래스, 아이디 선택자에 대해 알아봤어요 이번 포스팅에선 또 다른 선택자인 자식, 자손, 구조 선택자에 대해 알아보도록 할게요 : ) 앞의 내용이 궁금하신 분은 https://pncoding.tistory.com/12 [CSS 기초] css 선택자 (1) 태그, 클래스, 아이디 선택자 안녕하세요 PNcoding입니다 :) 이번 포스팅에선 CSS를 처음 사용하기 위해 필수인 선택자에 대해 알아보도록 할게요! *선택자 란? HTML의 태그를 선택하는 방법으로 원하는 태그를 선택 후 스타일을 pncoding.tistory.com 여기를 참고해 주시면 되겠습니다 :) 1. 구조 선택자 부모 자식 관계 태그 중 원하는 '번째' 자식 요소를 선택할때 사용.. 2023. 11. 2. [HTML 기초] HTML 태그 종류 (2) - img 태그, a 태그 안녕하세요 PNcoding입니다 :) 웹사이트에는 필수적으로 이미지가 들어가 있어요. 글자만 있는 사이트보다는 중간중간 이미지가 들어있는 사이트가 좀 더 이쁘게 보이며 사용자(유저) 입장에서 좀 더 내용을 직관적으로 알아볼 수 있기 때문에 훨씬 더 사이트를 쾌적하게 즐길 수 있게 되어요. 또한 웹사이트에서 절대로 빠지면 안 되는 것! 바로 흥미 있는 내용을 클릭 클릭 할 때마다 넘어가는 페이지들이죠? 넘어가는 페이지들을 보다 보면 시간이 얼마나 지나가 있는지 깜짝 놀랄 때가 많은 경험이 있어요. 이렇게 우리는 웹페이지에 필수적으로 들어가는 이미지를 넣어주는 방법과 링크를 연결하는 방법에 대하여 알아보도록 할게요 :) 1. 이미지태그 img 태그 img 태그는 말 그대로 image 의 줄임말로서 이미지를 .. 2023. 11. 1. [CSS 기초] css 선택자 (1) 태그, 클래스, 아이디 선택자 안녕하세요 PNcoding입니다 :) 이번 포스팅에선 CSS를 처음 사용하기 위해 필수인 선택자에 대해 알아보도록 할게요! *선택자 란? HTML의 태그를 선택하는 방법으로 원하는 태그를 선택 후 스타일을 지정할 수 있습니다. 1. 태그(tag) 선택자 HTML의 태그 즉, 요소(element)를 선택하는 방법입니다. /* CSS 코드 */ div { width: 100px; height: 100px; background-color: salmon; } div 태그 1 div 태그 2 div 태그 3 원하는 태그명을 작성 후 { } (중괄호)를 열어 CSS 속성을 작성을 하면 선택한 태그에게 스타일을 적용할 수 있습니다. 이때 body내의 선택한 모든 태그가 동일한 스타일이 적용됩니다. 2. 클래스(cla.. 2023. 11. 1. [HTML 기초] HTML 태그 종류 (1) - h 태그, p 태그, br 태그 안녕하세요 PNcoding입니다 :) 이번 포스팅에선 HTML 태그의 종류에 대해 알아볼게요! 1. 제목태그 h 태그 h 태그는 문서의 제목을 표시할 때 사용하는 태그로서 "heading"의 뜻을 가지고 있습니다. h 태그는 h1부터 h2, h3 ~ h6까지의 총 6개가 있으며, h1 태그의 크기가 가장 크게 h6 태그의 크기가 가장 작게 표현됩니다. 즉, h 태그 옆의 숫자가 작아질수록 글자의 크기가 작아진다고 보시면 됩니다. h1 태그 입니다. h2 태그 입니다. h3 태그 입니다. h4 태그 입니다. h5 태그 입니다. h6 태그 입니다. 보시다시피 h1 으로 적어준 내용이 가장 큰 것을 확인할 수 있습니다. 하지만 h 태그를 사용할 시 주의하셔야 할 점이 있습니다. h1 태그를 사용할 시, 반드시.. 2023. 10. 31. 이전 1 2 3 4 5 다음 반응형
