Programming/HTML, CSS32 [CSS] 셀렉터 2 - 연결 셀렉터 지난 포스트에서 대표적으로 쓰이는 5가지 셀렉터를 알아보았다면 이번 포스트에서는 여러 요소들을 연결해주는 연결 셀렉터에 대해서 알아보겠습니다. 1. 하위 셀렉터 (자손 셀렉터, Descendant Selector) 처음 배울때는 자손 셀렉터로 배웠었는데, 인터넷을 찾아보니 하위 셀렉터라는 이름을 가지는 것이 더 좋다고 판단되어서 하위 셀렉터로 기술하겠습니다. (양질의 검색결과 + 후에 나올 자식 셀렉터와의 혼용 방지) 하위 셀렉터는 상위 요소의 스타일이 하위 요소에 모두 적용되는 셀렉터입니다. 상위 요소를 먼저써주고 하위 요소를 써주는데 이 둘은 공백으로 구분합니다. 하위 셀렉터는 상위 요소내에 포함된 특정 하위 요소들에 전부 스타일이 적용되며, 이는 하위의 하위 즉 자손 요소 까지도 적용이 됩니다. 아.. 2020. 9. 26. [CSS] 셀렉터 1 "셀렉터" 셀렉터란, CSS에서 스타일을 적용할 요소를 선택할 수 있게 해주는 요소 입니다. 셀렉터는 스타일의 적용 상황이 모두 다르듯 그 종류가 굉장히 방대합니다. 이번 포스트에서는 자주 쓰이는 셀렉터 몇가지를 소개하겠습니다. 1. 전체 셀렉터 이름이 말해주듯 모든 요소에 스타일을 적용하는 셀렉터입니다. 사용법은 간단하게 '*'를 사용합니다. * { 속성: 속성 값; } 2. 태그 셀렉터 태그 셀렉터는 특정 태그를 선택하여 그 태그에 스타일을 적용합니다. '태그명'을 통해 적용시킵니다. 태그명 { 속성: 속성 값; } 3. 클래스 셀렉터 클래스 셀렉터는 일부분에만 다른 스타일을 적용하는 경우에 사용합니다. 클래스를 사용하기 위해서는 태그 안에 클래스명을 명시하고 css에서 반드시 .(점)을 통해 지정해.. 2020. 9. 25. [CSS] Cascading, 캐스케이딩 지난 포스트에서 css에 대한 기본적인 것들을 알아보았습니다. 이번 포스트에서는 css의 핵심요소인 캐스케이딩 규칙에 대해서 알아보도록 하겠습니다. Cascading, 캐스케이딩은 폭포, 위에서 아래로 쏟아지는이라는 의미를 가진 영단어입니다. 캐스케이딩 스타일 시트, 말 그대로 위에서 아래로 적용되는 스타일 시트라는 의미입니다. css의 맨 앞글자가 캐스케이딩인만큼, css에서는 캐스케이딩 원리가 가장 중요하게 적용됩니다. ★ 왜 캐스케이딩 규칙이 중요한가? html/css를 사용하다보면 한 태그에 여러 스타일이 겹쳐지는 경우가 발생합니다. 이럴경우에 어떤 스타일요소를 우선적용할지 결정하는 것이 캐스케이딩입니다. 그렇기때문에 캐스케이딩 개념에 대한 이해를 통해 요소의 적용을 하는 것이 중요합니다. 캐스케.. 2020. 9. 11. [CSS] CSS 지난 포스트로 html의 대표적으로 많이 사용되는 태그들을 알아보았었습니다. html과 짝꿍을 이루며 등장하는 css를 이번포스트부터 다뤄보려고 합니다. html이 웹에서 기본 구조를 담당하고 있다면 css는 웹의 디자인적 요소들을 담당하고 있습니다. CSS(Cascading Style Sheet)는 디자인적 요소를 html에서 분리시켜 주는 역할을 합니다. html과 스타일요소가 함께 쓰인다면 html문서는 굉장히 난잡하고 관리하기 어려워집니다. 그래서 css를 통해 스타일을 따로 관리하게 됩니다. 스타일을 따로 관리한다면, 기능적 요소를 수정할때는 html문서만 수정할 수 있는 장점이 있습니다. 반대로 스타일요소는 css파일로 따로 관리하기 때문에 같은 html문서라도 css설정에 따라서 다른 디자인.. 2020. 9. 9. [HTML] 미디어 관련 태그 html5가 나오기 이전, 웹 페이지에서 미디어를 재생하려면 플러그인이라는 것을 이용해서 삽입해야 했습니다. 그러나 html5가 나오면 오디오와 비디오를 재생하는 태그가 생겼습니다. 그래서 html5를 지원하는 브라우저라면 미디어파일들을 쉽게 태그로 삽입할 수 있게 되었습니다. : 오디오 파일을 삽입합니다. 브라우저에서 배경음악이나 소리를 재생할 때 사용하며 .mp3확장자의 파일사용이 권장됩니다. src속성을 이용해 경로를 지정해주면 됩니다. : 비디오 파일을 삽입합니다. 사용법은 audio와 유사합니다. 와 에는 속성들이 있는데 두 태그의 속성이 대부분 같습니다. 와 의 속성 width,height 각각 너비와 높이를 지정합니다. controls 컨트롤 막대를 표시합니다. 사용시 속성 값 없이 cont.. 2020. 9. 3. [HTML] 시맨틱 태그들 시맨틱 태그란, 태그만을 봤을 때 브라우저가 구성된 구조를 알 수 있는 태그를 말합니다. 웹 페이지의 구성요소로써는 티스토리 블로그메인을 기준으로 블로그의 이름과 배너를 보여주는 헤더, 블로그의 내용을 표시하는 콘텐츠, 프로필과 블로그의 메뉴등을 표시하는 사이드바, 저작권표시나 블로그 저자에 대한 정보를 갖는 푸터의 네가지 구성으로 되어있습니다.(블로그 구성 설정에 따라 다를 수 있습니다.) 지난 포스트의 div와 span처럼 시맨틱 태그에는 자체적으로 기능은 없고 구조를 구분할 때 사용합니다. 같은 구조를 구분하는 태그인데 div와의 차이점은 무엇일까요? 우선 시맨틱 태그들은 전체적인 구조를 구성할 때 이용합니다. 반면에 div태그는 각 구조안의 몇몇 콘텐츠들을 묶어서 따로 CSS효과를 적용할 때 사용.. 2020. 9. 2. 이전 1 2 3 4 5 6 다음 300x250
