본문 바로가기

웹코딩 배우기/· CSS140

CSS 이미지 중앙 정렬 이미지 중앙 정렬은 지난 시간에 공부한 div 중앙 정렬과 쪼매(조금) 다르다. 2019/12/03 - [웹코딩 배우기/· CSS] - CSS 레이아웃 가로 중앙 정렬 이미지 가로 중앙 정렬 실습하자. 딩가딩가~ 오랜만에 css 공부 하니까 재미지다.^^ 이 방법 말고도 중앙 정렬하는 방법은 다양하다. 상위 요소에 text-align: center;를 써도 되고 margin: 0 auto; 등등... 2019. 12. 11.
CSS 레이아웃 가로 중앙 정렬 오랜만에 웹코딩 공부를 한다. 두근두근. 오늘 배운건 요소의 정렬 방법. 이건 스킨 편집하면서 몇 번 해봐서 조금 익숙하다. 그러나 공부하면서 모르는 부분이 이렇게 많았나 했다. 내가 아는 건 언제나 조금. div 가로 중앙 정렬 가로 중앙 정렬은 margin: auto; 를 쓰면 된다. 실습해보자. 위 실습 창의 CSS를 보면 text-aline: center; 가 있다. 이건 요소 안의 내용을 중앙 정렬하는 거다. 요소 자체 중앙 정렬과 요소 안의 내용을 중앙 정렬하는 건 잘 구별하자. 2019. 12. 6.
CSS inline. inline-block. block 차이 display: inline; display: inline-block; display: block; 요소를 나열하는 방법이다. 쩌~~~ 번에 이에 관한 공부를 한적이 있다. 2019/10/15 - [웹코딩 어려워/· HTML] - HTML 블록과 인라인 HTML 블록과 인라인 요소의 표시 방법에는 블록 구조와 인라인 구조가 있다. 이 두 단어는 스킨 편집 할 때 몇 번 들어봤다. - 블록 구조 정의 : 항상 새 줄에서 시작하고 전체 너비를 사용한다. 블록 구조의 태그 address article a.. nilgi.tistory.com 한번 봐주고 다음으로 넘어가는게 좋겠다. 실시간으로 글을 막 쓰기에 보고 다시 글을 쓴다. inline은 가로 나열이다. 요소와 요소 사이에 공간이 없고 css를 보면 알 .. 2019. 12. 4.
CSS 이미지 나란히 나열 .name::after { content: ""; clear: both; display: table; } 이용한 이미지 나란히 나열하기. 이미지 크기는 100%로 해야 반응형이 된다. 지정해주지 않으면 원본 크기로만 보여 영역을 벗어나거나 스크롤이 생긴다. 브라우저 크기를 조정해보면 이미지 크기도 줄어들고 늘어난다. 2019. 11. 30.
CSS 너비가 같은 박스 만들기 box-sizing box-sizing을 이용해서 너비가 같은 박스 상자를 만들어보자. 이거는 저번에 배운 .name::after {content: ""; clear: both; display: table;}을 이용한다. box-sizing은 각 박스의 너비를 넓히는 항목인 padding, border값을 추가하면 상자가 깨질수 있다. 상자 전체 너비나 높이에 padding, border 사용해 상자 안에서 유지되도록 한다. 2019. 11. 29.
CSS float overflow: auto; 대체 저번에 float 배울때 영역안에 배치하는 태그로 overflow: auto;를 사용했다. 근데 현대사회(?) 태그에서는 이것보다 .clearfix::after { content: ""; clear: both; display: table; } 이렇게 쓴다고 한다. 더 어려운데... ㅠㅠ 그리고 난 아직 ::after 배운적 없는데...아... 답답하네 또. display: table도 써본적 없다.아... 진짜 짜증나네 또. 모르니까 일단 해보고만 넘어가자. 외우자. 모를 때는 무작정 외우는게 최고. 2019. 11. 29.
CSS clearfix float을 사용할 때 이미지가 크거나 내용이 짧으면 컨텐츠 영역을 벗어난다. 그냥 보기에는 잘 모르지만 컨텐츠에 배경이나 테두리가 들어가면 보인다. 말로 설명하면 어려운데 그림으로 확인해보자. 컨텐츠 구조에 overflow: auto;를 사용해주면 이미지가 크든 내용이 짧든 컨텐츠 내에 들어간다. 날이 추워지니 머리도 어는것 같다. 이해가 안 돼서 몇 번이고 다시 본다. 2019. 11. 26.
CSS clear clear은 지난 시간에 배운 float을 지우는 태그다. float: left; 를 사용했는데 이 속성을 지우고 싶을 때 그에 관여한 구조에 넣으면 된다. clear: none; / 기본값. float 값 허용. clear: left; / float: left; 값을 허용하지 않는다. clear: right; / float: right; 값을 허용하지 않는다. clear: both; / 양쪽 값을 허용하지 않는다. clear: inherit; / 상위 값을 상속받는다. 이 태그는 사전에서만 보고 처음 써본다. 처음에 이해를 못해서 한~~~~~참을 봤다. 이제 이해 감. 돌탱아... ㅠㅠ 2019. 11. 21.
CSS float float는 컨텐츠를 배치하는 형식을 지정한다. 흔히 볼 수 있는 이미지를 왼쪽에 두고 오른쪽에 글이 오가나 그 반대의 경우를 사용할 때 쓰는 태그다. 말로 하니까 내가 이해가 안 된다. =-=' 이미지로 한번 만들어보면 빠르게 이해가 될 듯. 이미지 나와라~뿅! 이런게 float다. 역시 백번 말하는 것보다 눈으로 한번 보는게 빠른 이해 고고. float: left; / 요소를 왼쪽에 (내용은 오른쪽) float: right; /요소를 오른쪽에 (내용을 왼쪽에) float: none; / 기본 값. float: inherit; / 상위 요소의 값을 상속 받는다. 브라우저의 크기가 줄어들면 내용(글)은 아래로 내려온다. 신기하네. =-=? 2019. 11. 20.
CSS overflow overflow 내용이 지정한 영역을 벗어났을 때 어떻게 처리할 건지 설정한다. 내용을 잘라낼지 스크롤바를 만들것인지. 뭐 이런거? overflow: visible; / 기본. 넘치는 내용이 외부에 표시된다. overflow: hidden; / 넘치는 내용은 보이지 않는다. overflow: scroll; / 스크롤이 추가돼 넘치는 내용을 보여준다. overflow: auto; / 자동으로 스크롤이 유무를 설정한다. [CSS Result HTML을 클릭하면 각 화면을 볼 수 있습니다] 2019. 11. 20.
CSS position position: static; 특정 지정 값에 영향을 받지 않고 문서의 정상적인 흐름에 따라 배치된다. position: relative; top, right, bottom, left 값에 따라 위치가 변경된다. position: fixed; top, right, bottom, left 값에 컨텐츠가 고정 된다. position: absolute; 상위요소 기준으로 컨텐츠가 정해진다. position: sticky; 스크롤 했을 때의 위치. 스크롤 되다가 지정한 위치에 정지하고 다른 컨텐츠와 달리 스크롤이 멈춘다. z-index: 숫자; 겹치는 컨텐츠의 순서를 정의한다. 숫자가 클수록 위에 보이며 -(마이너스)값을 가진다. 2019. 11. 19.

티스토리툴바