choco's story

컨테이너 태그컨테이너 태그란?: 콘텐츠나 레이아웃에 아무런 영향을 주지 않고, 여러 요소들을 묶어 관리하기 편하게 해주는 태그보통의 개발자들은 콘텐츠 내용을 구분하거나 공통적인 스타일을 적용할 때 컨테이너를 사용합니다.아래 두 가지 태그가 컨테이너 역할을 하는 태그들입니다. ~ : 블록 레벨 컨테이너 ~ : 인라인 레벨 컨테이너직접 코드를 작성해보며 컨테이너 영역이 어떤 식으로 이루어지는지 확인해보도록 하겠습니다.컨테이너 영역 예시 컨테이너로 영역 구분 - 블록 레벨 블록 레벨 영역 내부 컨테이너로 영역 구분 - 인라인 레벨 인라인 레벨 영역 내부 이 문단 텍스트에서 인라인 레벨 영역은 이 부분입니다. ..

img 태그img 태그란?: .html 문서에서 이미지를 표시할 때 사용하는 단일 태그.html 문서에서는 이미지를 넣을 때도 태그를 사용합니다.img 태그는 단일 태그로 콘텐츠를 적지 않는 대신, 해당 태그의 속성에 삽입하려는 이미지에 대한 정보를 주어야 합니다.img 태그의 기본 형태는 다음과 같습니다.여기에 추가로 width, height 등의 너비와 높이 옵션도 추가하여 이미지의 크기와 높낮이를 조절할 수 있습니다.여기서, 너비와 높이는 각각 픽셀(px) 단위입니다!이미지 넣기 예시 웹 브라우저에 이미지 표시하기 width = 너비, height = 높이 img 태그에 지정한 크기대로 이미지가 나타나는 것을 알 수 있습니다.+ alt 속성은 왜 쓸까?alt는 al..

태그의 구분블록 요소 vs 인라인 요소블록 레벨 요소: 자신이 속한 영역의 너비를 모두 차지하여 블록 형성 인라인 요소: 자신에게 필요한 만큼, 즉 실제로 사용하는 공간만 차지블록 요소 & 인라인 요소 영역 구분 예시 블록 요소 블록 요소가 차지하는 영역의 크기를 테스트 중입니다. 인라인 요소 인라인 요소가 차지하는 영역의 크기를 테스트 중입니다. 이 코드를 실행하고 개발자 모드(F12)를 통해 각 요소의 영역을 확인해봅시다.블록 요소인 p 태그는 문장이 끝났어도 해당 영역 전체를 차지합니다.인라인 요소인 span 태그는 해당하는 텍스트의 영역만 차지합니다.span 태그는 해당 태그 자체로는 의미가 없습니다. 특정 영역에만 속성값을 추가하..

문단(paragraph) 태그p 태그 : 문단 요소를 나타내는 태그로, 가장 많이 쓰이는 텍스트 태그하나의 p 태그는 하나의 문단을 표현하고, 문단 사이에는 공백이 있습니다.문단 태그 사용 예시 텍스트를 표시하고 있습니다. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure..