제뉴어리의 모든것

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 우선 이러한 예제를 ..

우선순위 테스트 /* 적용됨 */ 이름 /* 적용됨 */ 전화번호 /* 적용됨 */ 결과 화면 코드에 달린 주석에서 설명하듯이 #ulist란 id를 가진 요소의 하위 요소중 첫번째 자식이 될 수 있는 모든 요소에 스타일이 적용됬다. 그렇다면 이름 라벨에만 스타일을 적용하고 싶다면? #ulist :first-child{ /* ulist란 id를 가진 요소 하위에 첫번째 자식이 되는 모든 요소에 적용 */ border: 10px solid pink; } 부분을 아래와 같이 바꿔주면 된다. #ulist li:first-child{ border: 10px solid pink; } 결과화면 그렇다면 이름 input요소에만 스타일을 적용하고 싶다면? 위에서 수정한 스타일 부분을 아래와 같이 수정 해주면 된다. #u..