# FE
간단한 웹서버
결과물을 웹 서버에 올려 확인할 필요가 있습니다. 톰캣 등의 웹 서버는 좀 번거롭기도 해서 좀 서 심플하게 사용할 수 있는 node용 웹서버가 있습니다. https://github.com/indexzero/http-server 사용 방법은 아래와 같습니다. # 설치 $ sudo npm install -g http-server # 서버 시작 $ http-server -a 0.0.0.0 -p 8000 브라우저를 통해 localhost:8000/index.html 으로 접속 시 http-server를 실행한 디렉토리의 index.html 파일로 접근이 가능합니다. 혹시 node.js 가 설치 안되어 있을 경우 아래 명령어로 설치 가능합니다. $ apt-get install nodejs-legacy npm 출처..
JS, CSS 변경 후 웹 브라우저에 적용 안될 때
코드 수정 후 html에 삽입할 때 ver=1 이런 식으로 넣어주면 브라우저가 파일 수정됨을 인식함 JS도 .js?ver=1 이런 식으로 넣기
display:none 과 visibility:hidden 차이점
1. display:none 보이지도 않고 공간 소비 하지않음 -> 순번같은거 숨기기 좋음 2. visibility:hidden 보이지는 않지만 주어진 width, height만큼의 공간이 소비됨
[CSS3] 좌우 중앙정렬 하면서 위아래 간격 띄우기
margin 0 auto 걸어놓고 위아래 margin 설정하는 법을 찾아보다가 https://stackoverflow.com/questions/9165369/css-margin-auto-center-with-top-margin-valid CSS margin auto center with top margin - VALID? Is this valid CSS to center the div and also apply a top margin? div { margin: 0 auto; margin-top: 30px; } stackoverflow.com 를 참고하였음. margin: 30px auto 0; 하면 끝
CSS 선택자
주제 공부한 곳 tcpschool.com 공부 내용 스타일 적용의 우선순위 1. 인라인 스타일 2. 내부 / 외부 스타일 시트 3. 웹 브라우저 기본 스타일 CSS 선택자(selector) 전체 선택자 HTML 요소 선택자 ID 선택자 CLASS 선택자 그룹 선택자 전체 선택자 CSS를 적용할 대상으로 HTML 문서 내부의 모든 요소를 선택 HTML 요소 선택자 CSS를 적용할 대상으로 HTML 요소의 이름을 직접 사용하여 선택 ... 이 부분에 스타일을 적용합니다. ID 선택자 CSS를 적용할 대상으로 특정 아이디 이름을 가지는 요소만을 선택 ... 이 부분에 스타일을 적용합니다. CLASS 선택자 CSS를 적용할 대상으로 특정 집단(CLASS)의 여러 요소를 한 번에 선택 같은 클래스 이름을 가지는 ..
CSS 기본 속성
CSS 기본 속성 공부한 곳 tcpschool 공부 내용 색상 지정 1. 색상 이름으로 표현 2. RGB 값으로 표현 3. 16진수로 표현 배경 속성 background - 모든 background 속성을 이용한 스타일을 한 줄에 설정할 수 있음 background-color - 해당 요소의 배경색을 설정 background-image - 해당 요소의 배경으로 나타날 배경 이미지 설정 - 기본 설정으로 반복됨 background-repeat - 반복 방향을 설정하고나 안하도록 설정 background-position - 반복되지 않는 배경 이미지의 상대 위치를 설정 background-attachment - 위치가 설정된 배경 이미지를 해당 위치에 고정 - 스크롤해도 움직이지 않음 텍스트 속성 color..
ID, Class, Name 속성 비교하기
id, class, name HTML 속성 값인 id, class, name을 비교해보자 공부 내용 id class name 문서 내에서 유일한 값 복수로 존재 가능(class 하나를 재사용) 여러 요소 적용 가능 단 하나의 Element 선택 가능 여러 Element를 선택 가능 submit 전송 시 사용 가능 CSS에서 식별자로 사용 가능 CSS에서 식별자로 사용 가능 CSS에서 식별자로 사용 불가 jQuery: $("#아이디") jQuery: $(".클래스명") jQuery: $("input[name=이름]")
CSS3 기초 내용 정리
CSS3 공부한 곳 TCPSCHOOL.com 공부 내용 CSS3 CSS란 Cascading Style Sheets의 약자 CSS는 HTML 요소들이 화면에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어 CSS 적용 방법 인라인 스타일 내부 스타일 시트 외부 스타일 시트 1. 인라인 스타일 HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법 해당 요소에만 스타일이 적용됨. 인라인 스타일을 이용하여 스타일을 적용하였습니다. 2. 내부 스타일 시트 내부 스타일 시트를 이용한 방법은 HTML 문서의 태그 내에 3. 외부 스타일 시트 웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 해줌. 스타일을 적용할 모든 웹 페이지의 태그 내에 태그를 사용하여 외부 스타일 ..