본문 바로가기

웹코딩 배우기293

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.
CSS 외부여백 margin 티스토리 스킨 편집하면서 지겹도록 봤던 태그다. m.a.r.g.i.n... 토 나온다. =-= 그러니 복습 삼아 정리만 하고 가자. margin은 컨텐츠의 외부 여백을 설정한다. margin은 상-우-하-좌 각각 값을 줄 수 있다. 보통 px; 단위를 사용하고 % 도 많이 사용한다. margin-top / 상 margin-right / 우 margin-left / 좌 margin-bottom / 하 margin은 위의 상-우-좌-하로 쓰지 않고 한번에 쓴다. margin: 0 0 0 0; / 상-우-하-좌 margin: 0 0 0; / 상-우좌-하 margin: 0 0; / 상하-우좌 margin: 0; / 상우하좌 margin: auto; / 가로 중앙 margin: inherit / 상위 속성을 받는.. 2019. 10. 28.
CSS 테두리 border css 테두리 태그를 알아보자. html에서 몇 번 해봐서 쉽다. 테두리 모양 border-style 2019. 10. 28.
CSS 배경 css 배경 이미지에 대해서 알아보자. 배경색은 기본이라 넘어간다. {background-color: 색;}으로 쓰면 배경색은 지정이 끝난다. 배경 이미지는 조금 알고 넘어가야 할 부분이 있어 정리해보자. .body { background-image: url("1234.png"); } 이미지 지정 방법은 기본 이렇다. 요소의 넓이 보다 이미지가 작으면 기본 반복으로 표현된다. 이미지 반복 설정 .body { background-image: url("1234.png"); background-repeat: repeat-x; } 이미지 가로 반복 설정. .body { background-image: url("1234.png"); background-repeat: repeat-y; } 이미지 세로 반복 설정. .. 2019. 10. 28.
CSS 색 css에서 색은 html 색과 99% 동일하다. 잠깐 살펴보고 넘어가면 될 것 같다. 닐기의 티스토리입니다. 배우고 싶은 공부를 주로 포스팅합니다. 영양가 없어서 죄송합니다만? 저한텐 중요한 자료들입니다. 닐기의 티스토리입니다. 배우고 싶은 공부를 주로 포스팅합니다. 영양가 없어서 죄송합니다만? 저한텐 중요한 자료들입니다. 색상에 대한 건 다음 글을 참고하자. 2019/10/12 - [웹코딩 어려워/· HTML] - HTML 색상 HTML 색상 html 색상은 색이름, rgb, hex, hsl, rgba, hsla 값을 사용한다. 파란배경 흰 글씨 nilgi.tistory.com 2019. 10. 28.
CSS 외부, 내부, 인라인 html에 css를 적용하는 방법은 3가지가 있다. 외부 css 파일을 링크걸어 불러와 적용하는 방법. html 문서의 head 내부에 넣는 방법. html 요소 자체에 넣는 방법이 있다. 조금 더 자세하게 알아보자. 외부 css 외부 css 파일만 변경하면 html 문서 전체에 적용이 된다. 티스토리 스킨 편집이 이러한 경우다. 이렇게 외부 파일이 연결되 있다. 외부 파일은 "이름.css" 확장자 css로 저장해야 한다. 내부 css 내부 css는 2019. 10. 26.
CSS 요소 선택 css를 html의 요소를 선택해서 꾸미는 게 기본이다. 이전 과정에서 .nilgi {color: gold; font-size: 20px;} 이렇게 쓰는 거다라고 배웠다. 여기에서 앞 ".nilgi" 이 부분에 대해서 알아보자. html 요소를 선택하는 방법에는 5가지가 있다. 많기도 하다. 그러나 결국 1가지다. =-=? id > # html에서 id 요소를 선택한다. html에 nilgi라는 id를 가진 div 블록이 있다. id 이름은 자기 마음대로다. #nilgi {display: block;} 이렇게 id를 선택할 때는 이름 앞에 "#" 을 쓴다. id에 관한 건 다음 글을 참고해 주세요. 2019/10/15 - [웹코딩 어려워/· HTML] - HTML id="" HTML id="" id는 이.. 2019. 10. 26.

티스토리툴바