본문 바로가기

웹코딩 배우기/· CSS140

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.
CSS TEXT text에 관한 태그는 몇 번 적용해봐서 간단히 복습만 하고 넘어간다. 텍스트 태그는 잘 익혀두면 써먹을 일이 아주 많은 것 같다. 요즘 글쓰기 에디터에 많은 걸 지원해 주지만 티스토리는 네이버 스마트 에디터만큼의 기술을 지원해주지 않는데 대신 html을 직접 편집할 수 있으니 어렵지만 알고만 있다면 귀찮더라도 다양한 효과를 넣을 수 있다. 그래서 공부를 해야 한다. 짜증 나... (◣_◢) 가을이 오니 정신을 차릴 수가 없다. 조울증인가? jsfiddle 이용하니까 참 편한 것 같다. 옛날에는 하나하나 캡쳐해서 복습했는데 jsfiddle 좋다. (*￣▽￣) d 공부하면서 몰랐던걸 하나 배웠다. text-decoration: overline; 요고요고! 글자 위에 줄이 생기는 태그다. 이거 왜 아무도 안.. 2019. 10. 30.
CSS 외곽선 outline 외곽선은 컨텐츠를 강조하고 싶을 때 쓴다. outline은 기본 borber와 쓰는 방법이 거의 동일하다. 그러니 border에 관한 글을 참고하자. 2019/10/28 - [웹코딩 어려워/· CSS] - CSS 테두리 border CSS 테두리 border css 테두리 태그를 알아보자. html에서 몇 번 해봐서 쉽다. 테두리 모양 border-style - outline 속성 outline-style : 선의 종류 outline-color : 선 색상 outline-width : 선 두께 outline-offset : 컨텐츠와 외곽선 사이에 공간을 주기. outline : 속성 한 번에 쓰기. 기본 스타일/색/두께를 써야 한다. 외곽선과 테두리의 다른 점 : 외곽선은 다른 내용과 겹칠 수 있다. 외.. 2019. 10. 29.
CSS 요소 구조 상자는 컨텐츠, 내부여백, 테두리, 외부여백으로 구성 된다. 컨텐츠 - 텍스트, 이미지, 비디오, 오디오 등의 내용을 담는다. padding - 컨텐츠 내부에 여백을 넣는다. 패딩은 색상 값을 가지지 않는 투명이다. border - 컨텐츠와 내부 여백을 감싸는 테두리 margin - 외부 여백. 여백은 투명이다. 폭300px 높이150px / 배경색 토마토 / 내부여백 20px / 테두리 5px / 외부여백 15px 폭300px 높이150px / 배경색 토마토 / 내부여백 20px / 테두리 5px / 외부여백 15px 기본이 가장 익히기 어렵고 기본이 가장 많이 쓰인다. 2019. 10. 28.
CSS 높이 / 폭 아는 과목 나왔다. 짜쓰! height: px, %; - 높이 width: px, 5; - 폭 auto; - 기본 값. 브라우저나 지정한 요소의 크기를 자동으로 계산. initial - 지정된 값을 취소하고 기본으로 설정. inherit - 상위(부모) 값을 받는다. max-width: px, %; - 최대 폭을 설정. / max-height min-width: px, %; - 최소 폭을 설정. / max-height max / min 값은 반응형을 만들 때 많이 쓰고 애드센스 광고 크기를 조절할 때 쓴다. 폭 300px 높이 200px 세상엔 미친*들이 많다. 아뮈터블~ 후.............................. 폭 50% 높이 30% 2019. 10. 28.
CSS 내부 여백 padding 내부 여백 padding은 margin과 사용 방법이 거의 99% 동일하다. 그러니 다음 글을 참고하면 된다. 2019/11/22 - [웹코딩 어려워/· CSS] - CSS 외부여백 margin 불러오는 중입니다... padding에도 각각 값을 정할 수 있다. padding-top padding-right padding-left padding-bottom margin과 똑같이 한번에 쓰자. padding: 0 0 0 0; / 상-우-하-좌 / 단위는 px나 %를 많이 쓴다. !!중요!! 컨텐츠 너비와 패딩 값은 합쳐진다. 예를 들어 .div {width: 200px; padding:20px;} 라면... 컨텐츠의 최종 크기는 220px이 된다. 컨텐츠 기본 지정 값을 유지하려면 .div {width: .. 2019. 10. 28.

티스토리툴바