본문 바로가기

분류 전체보기

 (19)
css 기본 문법3(스타일 상속) 들어가기 앞서, CSS 기본 문법2에 이어 기본적인 문법 스타일 상속에 대해서 다루어보겠다. 상속 위 그림을 보면 .animal에 대해서만 css를 작성해주었지만 animal class의 하위 클래스인 tiger, lion, elephant class에도 css style이 적용된 것을 확인할 수 있다. 이를 상속이라고 한다. 모든 css 속성들이 상속 되는건 아니고 글자/문자와 관련된 속성들만 상속된다.(모든 글자/문자 속성이 상속되는 것은 아님) ex) font-style: 글자 기울기 font-weight: 글자두께 font-size: 글자 크기 line-height: 줄 높이 font-family: 폰트(서체) color: 글자 색상 text-align: 정렬 강제 상속 상속은 위에서 설명했듯이 ..
css 기본 문법2(여러가지 선택자) 들어가기 앞서, CSS 기본 문법1에 이어 기본적인 문법 선택자들에 대해서 다루어보겠다. CSS 선택자 *: 모든 요소를 선택 ABC: 태그 이름이 ABC인 요소 선택 .ABC: HTML class 속성의 값이 ABC인 요소 선택 #ABC: HTML id 속성의 값이 ABC인 요소 선택 ABCXYZ: 선택자 ABC와 XYZ를 동시에 만족하는 요소 선택 ABC>XYZ: 선택자 ABC의 자식 요소 XYZ 선택 ABC XYZ: 선택자 ABC의 하위 요소 XYZ 선택('띄어쓰기'가 선택자의 기호이다.) ABC+XYZ: 선택자 ABC의 다음 형제 요소 XYZ 하나를 선택 ABC~XYZ: 선택자 ABC의 다음 형제 요소 XYZ 모두를 선택 ABC:hover: 선택자 ABC 요소에 마우스 커서가 올라가 있는 동안 선..
css 기본 문법1(선택자, 속성, 값, 주석, 선언 방식) 들어가기 앞서, CSS의 꼭 알아야할 기본적인 문법들에 대해서 다루어보겠다. 선택자, 속성, 값 CSS는 기본적으로 "선택자{속성: 값;}" 과 같은 형식으로 이루어져있다. 여기서 선택자는 스타일(CSS)을 적용할 대상(Selector)이고 속성은 스타일(CSS)의 종류(Property)이고 값은 스타일(CSS)의 값(Value)를 뜻한다. ex) div { color: red; margin: 20px; } 선택자는 div이고 속성은 글자의 색을 뜻하는 color와 요소 외부 여백을 뜻한는 margin이고 값은 빨강색을 뜻하는 red와 크기를 의미하는 20px이다. 주석 주석은 "/*주석 내용*/"과 같이 작성할 수 있다. 단축키는 "Ctrl + /" or "Cmd + /" 이다. 이 주석 단축키는 대부..
HTML 기본 문법 들어가기 앞서, html의 꼭 알아야할 기본적인 문법들에 대해서 다루어보겠다. 태그 하이라이트 된 부분이 의미하는 것을 알아보자. 내용 : 요소(Element) 내용 : 시작(열린) 태그(Tag) 내용 : 종료(닫힌) 태그 내용 : 요소의 내용(Contents) 내용 : 빨간 태그 기준으로 하이라이트 된 부분이 부모 요소이다. 내용 : 빨간 태그 기준으로 하이라이트 된 부분이 자식 요소이다. 내용 : 빨간 태그 기준으로 하이라이트 된 부분이 상위(조상) 요소(바깥쪽의 모든 태그)이다. 내용 : 빨간 태그 기준으로 하이라이트 된 부분이 하위(후손) 요소(안쪽의 모든 태그)이다. : 종료(닫힌) 태그가 없는 태그를 빈(Empty) 태그라고 한다. 빈 태그는 혹은 로 표기해준다. 그냥 로 쓰는 것이 편리하긴하..
reset.css 브라우저 스타일 초기화 들어가기 앞서, css 스타일 초기화를 하지 않고 코드를 작성하면 브라우저마다 css 스타일이 조금씩 다르기때문에 브라우저 별로 다른 결과를 나타낼 수 있다. 따라서 reset.css를 통해 css 스타일을 초기화하고 작업을 시작하는 것이 좋다. reset.css cdn 구글에 reset.css cdn이라고 검색하면 아래와 같은 결과가 나오고 해당 링크로 이동한다. 링크로 이동하게 되면 아래의 페이지를 볼 수 있느데 여기서 reset.min.css와 reset.css 두가지 버전을 확인할 수 있다. 우리는 reset.css를 수정할 일이 거의 없으므로 reset.css의 경량화 버전인 reset.min.css를 Copy HTML 버튼을 눌러 복사해준다. 복사한 내용을 main.css를 link하기 바로 ..
codepen으로 코드 테스트 들어가기 앞서, 간단한 코드를 테스트 할때 매번 프로젝트를 새로 구성하지 않고 테스트할 수 있는 codepen이라는 사이트가 존재한다. codepen 구글에 codepen이라고 검색하면 아래와 같이 결과가 나온다. 이 사이트로 들어가면 아래와 같은 페이지를 확인할 수 있다 여기서 좌측 상단에 메뉴바에 보이는 Start Coding을 클릭한다. 그러면 아래와 같은 페이지를 확인할 수 있는데 이 페이지에서 간단한 코딩을 하면 바로 결과를 볼수있다. 이때 html부분은 body부분에 코딩을 하는 개념이라고 생각하면 된다. 아래는 실제 테스트 예시이다.
live server 들어가기 앞서, 코드를 작성하면서 바로바로 페이지에 반영되는 모습을 확인할 수 있게 임시로 로컬 서버를 오픈할 수 있다. 이를 가능하게 해주는 확장기능이 Live Server 기능이다. (실제 제품은 실제 호스팅 서버에 업로드해야한다.) Live Server 설치 Extensions에서 live server를 검색하면 첫 번째로 나오는 Live Server라는 확장기능을 설치한다. Live Server 사용 오른쪽 하단에 Go Live가 추가된 것을 확인할 수 있을 것이다. 기본 코드에 Hello world!를 찍는 위 html 코드를 작성한 후 go live를 클릭하면 go live부분이 Port로 바뀌고 위와 같은 페이지가 출력되는 것을 확인할 수 있다. 이제 코드를 수정하고 저장하면 바로바로 이 페..
Beautify 코드 정리 기능 들어가기 앞서, 코드를 작성하다보면 어지럽게 정리가 안된 상태로 코드를 작성하는 경우가 있다. 이때 Beautify를 활용하여 단축키로 코드를 정리할 수 있다. 보기 좋은 코드가 이해하기도 좋다. Beautify 설치 Extensions에서 beautify를 검색하면 첫 번째로 나오는 Beautify라는 확장기능을 설치한다. Beautify 설정 그리고 기능 기여도에서 명령부분에 HookyQR.beautify를 복사해준다. 이제 명령창(Crtl+Shift+p)에서 '바로 가기 키'를 검색해 '기본 설정: 바로 가기 키 열기'를 클릭한다. 여기서 아까 복사해둔 HookyQR.beautify를 붙여 넣어 Beautify selection을 더블클릭하여 단축키 설정을 해주고 사용하면된다. Beautify 사용..

티스토리툴바