html8 html float 개념 오늘은 float 개념에 대해 알아볼건데요 다음글에 주제인 그리드 레이아웃에 대해 알아보기 위해 꼭 선행해야 하는 개념입니다. float는 뜬다라는 뜻입니다. 사용법은 css에 float : left 또는 right 이렇게 입력하면 되는데요. float를 준 요소는 붕뜨고 그빈공간을 다른요소가 채우게 됩니다. 사실 글로 설명하니까 이해가 잘 안오실탠데요 예제 보여드릴게요 자이렇게 파란색 박스 분홍색 박스 보라색 박스가 있습니다. 그렇다면 저 파란색 박스에 float:left 이렇게 왼쪽으로 붕뜨게 하면 어떻게 될까요? 저희가 위에서 배운대로라면 파란색이 붕뜨기때문에 그옆으로 분홍색 박스가 들어가지 않을까요? 파란색 박스에 float : left;를 한번 줘봅시다. 파란색 박스가 붕뜨고 밑으로 분홍색 박스.. 2022. 8. 22. html position 쉽게정리! relative,fixed,absolute CSS에서 position 속성은 HTML 문서 상에서 요소가 배치되는 방식을 결정하는 것입니다. 목차 relative fitxed absolute position 요소는 static relative fixed absolute 이렇게 4가지 요소가 있습니다 먼저 static은 position : static 값은 원래 있어야 할 자리에 있다고 생각을 하면 쉬운데요. html에 모든 요소에 position은 static 을 기본값으로 받습니다. 그럼 static 말고는 어떤 요소가 있을까요? 먼저 첫번째로 알아볼 position 요소는 relative 입니다. position : relative 는 자기자신을 기준으로 원래위치에서 얼만큼에 간격을 준다고 생각하시면 쉬운데요. 예를 들어 position: r.. 2022. 8. 21. html 다양한 링크, 이미지 링크 오늘은 이미지를 링크로 만들고 또 링크 요소안에 h태그와 p태그를 넣어서 조금 더 보기 좋은 링크를 만들어 보겠습니다. 위 예제는 구글로 바로가는 링크페이지를 만든 것입니다. 기존에 태그 안에 글자만 입력하셨나요? 위 예제와 같이 , 그리고 태그등 다른 태그를 넣는 것이 가능합니다. 이런식으로 a태그안에 img 태그를 넣으면 넣은 사진은 링크가 됩니다. 예제와 같이 태그를 div 태그처럼 이렇게 처리해주시면 div 태그처럼 영역이 생깁니다. 그래서 저 영역 아무곳이나 클릭하면 링크된 페이지가 열리게 됩니다. 이런식으로 링크에 이미지를 넣으면 한눈에 알아 볼 수 있고, 사용자 입장에서 더 편하겠죠? 오늘은 다양한 링크를 만드는 방법에 대해 알아보았습니다. 2022. 8. 20. html 이미지(사진), 중앙 정렬하는 방법 2가지 바로 알아 보도록 합시다. 첫번째 방법은 img 태그를 div 태그로 감싸고 에 img 태그에 상위에 있는 div 클래스에 text - align : center; 라고 입력해주시면 중앙 정렬이 됩니다. 두번째 방법은 에 display: block; margin-left: auto; margin-right: auto; 라고 입력하시면 중앙 정렬이 됩니다. 오늘은 text-align:center와 display:block; 를 이용하여 이미지를 중간 정렬 하는것을 알아 보았습니다. margin-left: auto; margin-right: auto; 2022. 8. 20. 이전 1 2 다음
