HTML & CSS

[Sublime Text] 설치하고 FTP 연결하기 (mac)

- 설치하러 가기 https://www.sublimetext.com/ Sublime Text - A sophisticated text editor for code, markup and prose Goto Anything Use Goto Anything to open files with only a few keystrokes, and instantly jump to symbols, lines or words. Triggered with Ctrl+P⌘+P, it is possible to: Type part of a file name to open it. Type @ to jump to symbols, # to search within the f www.sublimetext.com 1. 위의 링크를 통해서 ..

[HTML5] 반응형 사이트 만들기 - 미디어쿼리

미디어 쿼리란? 화면 크기에 따른 각각의 속성 값을 지정하여 여러가지 화면을 구성하는 기술! 레이아웃을 기본적으로 할 줄 알아야 수월하게 할 수 있음! youngbin.dothome.co.kr/responsive/layout2.html 들어가서 화면을 줄여보면 조건에 따라 background 색이 바뀌는 것을 알 수 있음!! * 위와 같이 작업해도 되고 min-width 를 주어 좀 더 명확하게 작업해도 됨. css 는 아래로 갈수록 우선순위가 커짐!

[HTML, CSS] 게시판의 두 줄을 한줄로 바꾸는 효과

.notice ul li {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

[HTML, CSS] overflow: hidden;

CSS 의 overflow 프로퍼티는 요소 내의 컨텐츠가 너무 커서 요소 내에 보여주기 힘들 때 그것을 어떻게 보여줄지 지정한다. https://offbyone.tistory.com/296 CSS - overflow 속성 사용하기 CSS의 overflow 프로퍼티는 요소내의 컨텐츠가 너무 커서 요소내에 모두 보여주기 힘들때 그것을 어떻게 보여줄지를 지정합니다. 기본적으로 컨텐츠를 포함하고 있는 요소의 크기가 고정되어 있지 offbyone.tistory.com

[HTML, CSS] 헤더 아이콘 수정 2 (이미지 스프라이트)

위의 그림은 60px 단위로 아이콘이 만들어져 있는데 이 이미지를 url로 연결하고 아래와 같은 코드를 입력해주면 원하는 아이콘에 맞게 배치된다. .header .header-icon {text-align: center; margin-top: 30px;} .header .header-icon a {width: 60px; height: 60px; display: inline-block; background: url(../img/icon.png);} .header .header-icon a.icon1 {background-position: 0 0;} .header .header-icon a.icon2 {background-position: 0 -60px;} .header .header-icon a.icon3..

[HTML, CSS] 웹 폰트 초기 세팅

/* 폰트 초기화 */ body, input, textarea, select, button, table { font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, '돋움', sans-serif; } 윈도우는 설정이 좀 다를 수 있음 ㅠ 윈도우와 맥의 폰트를 동일하게 해주면 padding 의 차이를 좀 줄일 수 있음! 나눔고딕을 제일 많이 씀 - Google Fonts https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 위 이미지에서 link 부분을 복사한다. ..