본문 바로가기

웹코딩 배우기293

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.
CSS width / max-width width와 max-width는 한번만 해보면 알 수 있다. width는 컨텐츠 크기가 브라우저 크기보다 크면 스크롤이 생기고 max-width로 크기를 지정하면 스크롤이 생기지 않는다. 브라우저가 컨텐츠 크기보다 작아지면 컨텐츠도 작아진다. width max-width min-witdh height max-height min-height 크기를 지정하는 태그들은 당근 크기지정에 많이 쓰고 반응형 @media 태그에 많이 쓴다. 티스토리 css 편집에 들아가면 media 태그 엄청 많음. 2019. 11. 14.
CSS display display 태그는 말 그대로 화면에 어떻게 표시할지 정의한다. 티스토리 편집에서 가장 많이 쓰이는 속성은 display: none; display: inline; display: block; display: inline-block; 이렇다. html 태그는 기본적으로 인라인 구조의 속성을 가진 것과 블록 구조의 속성을 가진다. 이에 대한 내용은 다음 글을 참고하자. 2019/10/15 - [웹코딩 어려워/· HTML] - HTML 블록과 인라인 HTML 블록과 인라인 요소의 표시 방법에는 블록 구조와 인라인 구조가 있다. 이 두 단어는 스킨 편집 할 때 몇 번 들어봤다. - 블록 구조 정의 : 항상 새 줄에서 시작하고 전체 너비를 사용한다. 블록 구조의 태그 address article a.. nil.. 2019. 11. 13.
CSS table 테이블을 쓰는 방법은 html의 table를 참고하자. 2019/09/12 - [웹코딩 어려워/· 사전 상세 보기] - HTML 태그 : table 2019/10/15 - [웹코딩 어려워/· HTML] - HTML 테이블 css에서 배울 테이블 태그는 테두리와 꾸미기. ▲ 테두리 합치기 CSS. border-collapse: collapse; - 테이블 너비 높이. table: {table {width: px; height: px;} table {width: %; height: %;} - 테이블 내용 가로 정렬 text-aline: left; / right; / center; - 테이블 내용 세로 정렬 vertical-aline: top; / middle; / bottom; ▲ 테두리 아래만 나오기. 마.. 2019. 11. 12.
CSS 목록 목록은 ul, ol, li 태그를 사용한다. 3태그는 함께 사용가능하다. html 목록 태그와 사용 방법이 99.99% 동일하다. 다음글을 참고하자. 2019/10/15 - [웹코딩 어려워/· HTML] - HTML 목록 2019/10/15 - [웹코딩 어려워/· HTML] - HTML 목록 2 - css에서 사용 방범 - list-style-position: inside; / outside; 목록 마크 위치를 글의 외부, 내부에 표시할 수 있다. - list-style-type: none; 마크 표시하지 않기. - 목록 한줄에 다 쓰기 list-style: 모양 위치 주소 list-style: square inside url("image.gif"); - background-color 이용하기 2019. 11. 7.
CSS 링크 a a:link { } - 방문 전 링크 상태. a:visited { } - 방문 후 링크 상태. a:hover { } - 링크에 마우스를 올렸을 때 상태. a:active { } - 링크를 클릭했을 때의 짧은 순간. 링크 태그를 쓸 때는 순서가 있다. 반드시 link - visitde - hover - active 순서로 써야한다. 나 이거 몰랐어...=-= - text-decoration text-decorationd은 링크에서 주로 밑줄을 제거할 때 사용한다. a:link {text-decoration: none;} a:hover {a {text-decoration: none: underline;} - background-color 링크 태그에 백그라운드 색을 지정할 수 있다. a:link {backg.. 2019. 11. 5.
CSS font 웹페이지에 보여줄 폰트를 설정한다. * font-family: 'AppleSDGothicNeo', 'Noto Sans KR', sans-serif; 내 블로그를 살펴보니 애플, 노토, 샌스?라는 폰트를 기본으로 쓰고 있구나. 사용자는 제일 앞에 있는 폰트를 먼저 사용하게 되고 그 폰트가 없다면 다음 설정한 폰트를 써서 웹페이지에 표시해준다. * font-style * font-size em, px, % 단위를 사용한다. em : 브라우저의 기본 글자 크기는 16px 다 1em=16px라고 한다. em은 1.726처럼 소수점까지 쓸 수 있다. * font-weight 글자 굵기 normal; bold; bolder; lighter; 100, 200 300 이렇게 숫자로도 쓴다. * vw 반응형 글꼴 2019. 11. 4.

티스토리툴바