제뉴어리의 모든것

이미지 위에 텍스트를 출력하는 방법과 텍스트 위에 이미지를 출력하는 방법이다. 코드 이미지 위에 텍스트 이미지 아래에 텍스트 결과 화면 참고로, 부모요소에 text-align: center; position: relative; 스타일을 추가하고 이미지 자식요소에 position: absolute; 스타일을 추가하면 부모요소의 center속성값 때문에 브라우저상 출력커서의 위치는 center에 있다. 그 상태에서 이미지 자식요소는 absolute 란 속성값 때문에 해당 위치에서부터 이미지를 그린다. (자식 요소에 position: absolute; 스타일이 없으면 자동으로 이미지는 가운데 정렬이 된다.) 그러므로 아래와 같은 형태로 가운데 정렬이 아닌 모습으로 이미지가 출력된다. 그런데 여기서 positi..

clear의 개념과 clear가 왜 필요한지에 대해 알아보자 그러기 위해선 float의 개념을 알고 있어야한다. 모른다면 아래를 참고하자. https://januaryman.tistory.com/323 float의 기본 개념 float 속성이란 웹브라우저상의 기본 흐름에서 벗어나 요소를 왼쪽 혹은 오른쪽으로 띄워 주는 속성이다. 사용 예시를 살펴보자. 코드 CSS float 속성 Ex et adipisicing voluptate aliqua cupida.. januaryman.tistory.com 내가 만약 아래와 같은 레이아웃을 구현을 하고싶다면 어떻게 해야할까 제목과 이미지 그리고 해당 이미지에 대한 설명이 한쌍으로 된 레이아웃이다. 위에 float 개념에 대한 글을 읽은 사람이라면 너무나 쉬울것이다..

float 속성이란 웹브라우저상의 기본 흐름에서 벗어나 요소를 왼쪽 혹은 오른쪽으로 띄워 주는 속성이다. 사용 예시를 살펴보자. 코드 Ex et adipisicing voluptate aliqua cupidatat nulla. Laboris est sint sit aliqua enim. Aute Lorem eu sint aute sunt proident. Do culpa consectetur elit duis laboris reprehenderit incididunt nulla. Irure exercitation tempor aliqua laboris cupidatat anim in non officia aliquip excepteur fugiat labore. Lorem ipsum reprehender..

블록 레벨 요소 및 인라인 레벨 요소(Block Level Element) 블록 레벨(block-level) : 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소입니다. 이 한 줄을 차지한다는 의미는 너비가 100%라는 것을 뜻합니다. 따라서 다음 요소가 양 옆으로 붙을 공간이 없어서 자연스럽게 줄넘김이 됩니다. 블록 레벨은 다음과 같은 특징이 있습니다. margin, width, height 속성을 정의하면 모두 적용됩니다. 이런 특성 때문에 블록 속성을 가진 태그를 화면 구성이나 레이아웃에 사용할 수 있습니다. | 인라인 레벨 요소(Inline Level Element) 인라인 레벨(inline-level) : 줄을 차지하지 않는 요소입니다. 브라우저같은 화면에 표시되는 컨텐츠만큼 영역을..

첫번째 두번째 결과 화면

안녕하세요. 오늘은 display porperty에 대해서 알아 보겠습니다. 그 중에서 inline과 block 그리고 inline-block에 대해서 알아보겠습니다. 먼저 display property에서 간단히 설명하면 display는 화면이 렌더링 되었을때 어떠한 특정 영역이 표시 되는데 성질을 부여하는 property입니다. 그 중 가장 많이 사용 되는 inline과 block 성질(display property의 값)입니다. 우선, html의 태그들은 크게 block 요소와 inline 요소로 나눌 수 있다. block 요소 , , , , , , , , , none block1 block2 inline inline-block detualt inline-block block3 우선 이러한 예제를 ..