Other/CSS
CSS 를 HTML 적용시키는 방법
가장 기본 = 태그 내부에 style 을 연후 내부에 원하는 스타일을 다 적는다 외부에 css 파일을 만들고 경로와 파일명을 잘 적어 적용한다. 이때 css 파일에는 셀렉터 문법을 이용해 스타일을 작성하면 된다. import 를 통해 html 파일 내부에 css 를 포함시킬 수 있다.
Other/CSS
Other/CSS
CSS 스타일 여러개 적용하는법
클래스명 여러개 적용하고 싶으면 그냥 띄워쓰기 하면 됨 ..html 동일한 내용이 담겨있을 경우 우선순위는 뒤에 적은 클래스명 2가 먼저 적용된다! 여러가지 태그, 클래스에 동일한 속성을 주고 싶으면 이거는 콤마 써야 함 .Ctable td, .Ctable th { padding :15px; border-bottom: 1px solid #c2d3de; }
Other/CSS
Pseudo-class / 상태에 따른 스타일
버튼 동작과 같은 상황에서 버튼에 마우스를 올렸을 때, 버튼을 눌렀을때, 누르고 땠을 때 모양을 바꾸게 해주는 css 스타일 스타일이름: hover / focus / active { } hover : 마우스 올렸을 때 focus : 클릭 후 포커스 상태일 때 active : 클릭 중일 때
Other/CSS
Table
표 만들고 싶다 = table 행 만들고 열 만든다 = tr > td 대가리 행 thead 나머지 행 tbody 셀 안의 요소들 상하 정렬 해주고 싶다 => vertical-align 사용 테이블에서는 T/M/B 만 가능 병합 가로로 병합하고 싶다 colspan 세로로 병합하고 싶다 rowspan vertical-align : 요소간의 세로 정렬 할 때 사용 style = "vertical-align : top/middle/bottom" 큰 글자와 작은 글자 사이에서 작은 글자의 위치를 지정할 때 super = 위첨자 / sub = 아래첨자
Other/CSS
form 과 input
form 태그의 역할 action =" 경로 " 서버로 글이 전송할 때 어떤 경로로 전송될 지 알려줄 수 있음 method = " get / post 등.. " 작성한 내용이 어떤 방식으로 서버에 전달될 지 input type text : 일반 글자 입력 password : 비밀번호 * email date : 날짜 checkbox radio 라디오박스는 name 을 통일해야 함 button type="submit" 이것도 전송하는 버튼 input value 미리 채워진 값 input placeholder 미리 채워진/ 배경 글자 ( 반투명 추천 글자) input name 인풋 태그의 이름 설정 서버에 전달될 떄 필요함 드롭다운 태그 / 셀렉트 박스 TEXTAREA 원하는 사이즈 선택할 수 있는 큰 박스 ..
Other/CSS
div 박스 크기 고정하는 법(max-width 안먹힐때)
max-with 를 일정 픽셀로 잡아놔도 padding 크기가 커질경우 해당 픽셀보다 박스가 커지는 경우가 있다. 이는 width 가 박스의 크기가 아닌 컨텐츠 영역의 크기만을 나타내기 때문이다. ( box-sizing : content-box 가 디폴트로 깔려있음 ) 이를 해결하기 위해서는 max-width 설정과 더불어 box-sizing : border-box; 위 속성을 추가해야 함
Other/CSS
margin 없이 이동하기 / position
CSS 내부에서 Positon 을 부여하면 픽셀 단위로 상하좌우 좌표이동이 가능하다. .태그명{ position : relative; top : 픽셀; bottom : 픽셀; left : 픽셀; right : 픽셀; } positon relative 내 원래 위치를 기준으로 이동 static : 좌표이동 하지마 fixed : 현재 화면이 기준, 현재 화면을 기준으로 고정되는 요소가 필요할 경우 사용한다. 상단 고정바 같은거 absolute : 부보 태그를 기준으로 움직임 부모 태그 중 positon : relative 를 가진 애들을 기준으로 positon 부여할 경우 float 처럼 공중에 뜸
Other/CSS
마진 겹칠 때 해결 방법 margin collapse
박스 형태를 가진 태그 안에 또 다른 박스를 넣었을 경우 박스 위쪽이 겹쳐 두 태그의 마진이 겹치는 현상이 발생한다. = margin collapse 현상 내부 박스의 마진을 정상적으로 주기 위해서는 부모 박스에 padding 을 살짝 주면 해결
Other/CSS
CSS selector .셀렉터 문법
selector > 태그명 {} : 셀렉터 태그 안에 있는 직계 자식 태그에 스타일 주기 navbar > p{ 스타일 } // navbar 바로 직계 p 태그에만 스타일 적용 selector 태그명 {} : 셀렉터 안에 있는 모든 자식에게 스타일 주기 navbar p{ 스타일 } // navbar 내부의 모든 p 태그에 스타일 적용 input 태그 내에서 특정 타입의 속성만 변경하고 싶을 때 input[type=text] { style~~~; } n번째 등장하는 요소만 스타일링 할 때 .a th:nth-childe(3) { } // 세번째 행만 스타일링 하는 코드 even, odd 로 홀짝에만 둘 수 도 있고 3n+0 등으로 3의 배수 요소에만 스타일 줄 수도 있음
