Web/HTML & CSS
[CSS] 티스토리 코드블럭 여백, 테두리 없애기 : pre / !important
어느 순간부터 다음 사진처럼 코드블럭에 흰색 여백과 함께 테두리가 함께 생겼는데 거슬려하다 오늘에서야 해결방법을 찾아 없앴습니다 아래 코드블럭 보이시죠? 테두리를 없앴습니다 제가 해냈습니다 1. 해결 과정 바로 해결 방법만 보고 싶은 분들은 2.해결방법 으로 이동하세요 과정은 그저 제 기록용 1.1 코드블럭 Styles 확인 F12 키를 눌러 개발자 모드를 켠 후, 커서 모양을 누르고 코드블럭 근처로 마우스를 가까이 두면 해당 부분에 대한 html 코드가 하이라이팅됩니다 pre 태그가 붙은 부분을 클릭하면 테두리 영역과 관련된 Styles도 확인할 수 있습니다 1.2 테두리 영역에 해당하는 라인 찾기 padding, border를 위주로 체크를 해제해보며, 어떤 부분을 수정해야 코드블럭 테두리를 없앨 수..
[CSS] CSS3 (4) : 버튼, UI, 다중 칼럼 레이아웃, 플렉서블 박스 레이아웃, 미디어 쿼리
CSS3 버튼 (button) > CSS3 버튼 - 다양한 모양의 버튼을 만들 수 있다 - 태그 뿐만 아니라 태그와 태크로도 만들 수 있다 button 태그 a 태그 - (예) 마우스를 올리면 배경색이 변하는 버튼 - (예) 그림자 효과 설정 버튼 - (예) 버튼을 사용하지 못하게 설정 - 사용 금지된 버튼은 반투명하게 보인다 - (예) float 속성을 이용하여 만든 버튼 > 다양한 형태의 버튼 예제 - 애니메이션 효과를 이용하여 버튼에 다양한 효과를 줄 수 있다 - (예) 마우스를 올리면 버튼의 표시 내용이 바뀌는 예제 - (예) 버튼을 눌면 버튼 위로 다른 색상이 물결처럼 퍼지는 예제 - :active와 :after 선택자를 이용하여 transition 효과를 설정하여 구현 - (예) 진짜 버튼을 ..
[CSS] CSS3 (3) : 2D / 3D Transform, Transition, Animation
변형 (Transform) - transform 속성을 사용하여 HTML 요소의 모양, 크기, 위치 등을 바꿀 수 있다 - 제공하는 동작 : 요소를 움직이거나, 회전시키거나, 크기를 변경하거나, 기울이기 > CSS 좌표 체계 - CSS 좌표 체계에서 기준점은 브라우저의 왼쪽 상단 > 2D 변형 (transform) - CSS3 2D transform 속성 속성 설명 transform 요소에 2D 또는 3D transform을 적용함 transform-origin 요소에 transform을 적용하는 변환 중심을 설정 - CSS3 2D transform 메소드 메소드 설명 matrix(n,n,n,n,n,n) 모든 2D transform 메소드를 한 번에 설정 translate(x,y) 해당 요소를 주어진 x..
[CSS] CSS3 (2) : 그림자 효과, 배경, 테두리, 텍스트, 웹 글꼴
CSS3 그림자 효과 > text-shadow 속성 text-shadow: 그림자의x축값 그림자의y축값 blur값 색상값; - 그림자가 시작할 x축과 y축과 상대 위치를 명시하고, blur값으로 그림자의 흐린 정도를 명시 - (예) 다양한 그림자 효과 > box-shadow 속성 - 해당 HTML 요소에 그림자 효과 적용 box-shadow: 그림자의x축값 그림자의y축값 blur값 색상값; CSS3 배경 - 배경의 크기뿐 아니라 위치까지 설정 가능 - 하나의 HTML 요소에 여러 개의 배경 이미지 적용 가능 - CSS2의 background 속성 : background-color, background-image, background-repeat, background-position, background-..
[CSS] CSS3 (1) : CSS3 모듈, 벤더 프리픽스, 색, 그래디언트
CSS3 : 이전 버전 CSS와 완전히 호환되는 CSS의 최신 표준 권고안 > CSS3 변경 사항 : CSS3에서 새롭게 추가되거나 변경된 대표적인 기능 - Selectors Level 3 - Media Queries Level 3 - Color Level 3 - Namespaces > CSS3 모듈 (Module) : CSS3는 새로운 기능들과 함께 이전 버전 CSS 기능까지 포함하는 모듈이라는 것으로 구성되며, 다음은 CSS3를 구성하는 주요 모듈이다 - Selectors - Box Model - Backgrounds - Image Values and Replaced Content - Text Effects - 2D Transformations - 3D Transformations - Animatio..
[CSS] CSS 고급 (2) : Form 요소, @규칙
Form 요소 : 사용자의 입력을 받는 input 요소에도 다양한 스타일을 설정할 수 있다 > input 요소의 크기 설정 - width 속성을 이용하여 input 요소의 크기 설정 가능 > input 요소의 테두리 설정 - border 속성을 이용하여 input 요소의 테두리 색상, 두께를 바꿀 수 있다 - border-radius 속성을 이용하여 input 요소의 모서리를 둥글게 만들 수도 있다 > input 요소에 배경색 적용 - background-color 속성을 이용하여 input 요소의 배경색을 설정할 수 있다 - color 속성을 이용하여 input 요소의 텍스트 색상 변경 가능 > 포커스를 가지고 있는 input 요소의 스타일 적용 - focus 선택자를 이용하여 해당 input 요소가 ..
[CSS] CSS 고급 (1) : 내비게이션 바, 드롭다운, 툴팁
내비게이션 바 (navigation bar) : 우리가 흔히 사용하는 웹 사이트의 메뉴를 의미 > 링크를 사용한 리스트 메뉴 - 내비게이션 바 중에서도 가장 기본적인 것 - HTML에서 링크는 태그로 표현한다 - 다음은 링크를 사용하여 내비게이션 바를 구현한 간단한 메뉴 예제 Home HTML CSS 자바스크립트 > 수직 내비게이션 바 - 링크를 사용한 리스트 메뉴에 display 속성값을 block으로 설정 → 메뉴의 어느 곳을 클릭해도 연결된 페이지로 바로 넘어간다 - class를 이용하면 내비게이션 방서 현재 메뉴의 위치도 표현 가능, 다음 예제에서는 :not 선택자를 이용하여 현재 메뉴인 current 클래스와 그 외의 메뉴 배경색을 구분한다 - border 속성을 이용하여 내비게이션 바에 경계선..
[CSS] CSS 선택자 : 선택자, 의사 클래스, 의사 요소, 속성 선택자
선택자 : CSS에서 스타일을 적용할 대상을 선택할 때 사용한다 1. 전체 선택자 HTML 문서 내부의 모든 요소 선택 2. HTML 요소 선택자 3. 아이디(id) 선택자 특정 아이디 이름을 가지는 요소만을 선택 ※ 여러 요소에 중복된 아이디를 사용하면 HTML, CSS에는 문제가 없지만, 자바스크립트 작업에서 오류가 발생한다 → 하나의 웹 페이지에 속하는 요소에는 다른 아이디 이름을 사용하거나 클래스 사용 이 부분에 스타일을 적용합니다. 4. 클래스(class) 선택자 특정 집단의 여러 요소를 한 번에 선택할 때 사용 ... 이 부분에 스타일을 적용합니다. 이 부분에도 같은 스타일을 적용합니다. 5. 그룹선택자 여러 선택자를 같이 사용하고자 할 때 사용 결합 선택자 : 하나 이상의 선택자가 포함되었을..
[CSS] CSS 위치 속성 : 디스플레이, 포지션, 플로트, 정렬
디스플레이 ˙ 웹 페이지의 레이아웃을 결정하는 속성 ˙ 해당 HTML 요소가 웹 부라우저에 언제, 어떻게 보이는가를 결정 ˙ 대부분의 HTML 요소는 블록(block) / 인라인(inline) 두 가지 값 중 하나의 값을 가진다 블록 (block) : 언제나 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지 인라인 (inline) : 새로운 라인에서 시작하지 않고, 요소는 해당 HTML 요소의 content 만큼만 너비를 차지 인라인-블록 (inline-block) : 요소 자체는 인라인처럼 동작, 해당 요소 내부에서는 블록처럼 동작 visibility - 해당 요소가 웹 페이지에 표현될지 아닐지 - visible / hidden / collapse HTML 요소 숨기는 방법 1. di..
[CSS] CSS 박스 모델 : 크기, 패딩, 테두리, 마진, 아웃라인
크기 단위 다양한 크기 단위가 존재하지만 가장 많이 쓰이는 크기 단위는 다음과 같다 1. 백분율 단위(%) 2. 배수 단위(em) 3. 픽셀 단위(px) 크기 크기 조절을 위해 사용할 수 있는 속성 1. height / width 2. max-width / min-width : 해당 HTML요소가 가질 수 있는 최대 / 최소 너비 3. max-height / min-height 박스 모델 (Box model) 모든 HTML 요소는 박스 모양으로 구성 박스 모델은 HTML 요소를 다음과 같이 구분한다 1. 패딩(padding) : 내용과 테두리 사이 간격 - padding, padding-top, padding-right, padding-bottom, padding-left 2. 테두리(border) : ..