너와 나의 개발 고리

1. 선택자 CSS 속성을 적용할 대상을 선택하는 문법으로, 다양한 종류의 선택자를 지원한다. 2. 기본 선택자 전체 선택자 : 모든 태그를 선택자로 지정한다. 태그 선택자 : 태그명으로 선택자를 지정한다. 아이디 선택자 : id 속성값으로 선택자를 지정한다. 클래스 선택자 : class 속성값으로 선택자를 지정한다. 기본 속성 선택자 : HTML 태그에서 사용할 수 있는 속성과 값으로 선택자를 지정한다. 문자열 속성 선택자 : 태그의 속성값이 특정한 문자열과 일치하는 요소를 선택자로 지정한다. 3. 조합 선택자 기본 선택자와 조합해서 사용했을 때 선택자의 의미를 더 풍부하게 하는 역할을 한다. 그룹 선택자 : 여러 선택자를 , 기호로 구분해 선택자를 그룹으로 묶어서 지정 자식 선택자 : 선택자 범위를 ..

가상 클래스 선택자는 요소의 상태를 이용해 선택자를 지정하는 방법이다 형식) 기준 요소 : 가상 클래스 선택자 {/* CSS 코드 */} 가상 클래스 선택자가 매우 많지만 여기서는 자주 사용하는 가상 클래스 선택자 몇가지를 카테고리별로 정리하려고 한다 1. 링크 가상 클래스 선택자 a 태그에서 발생할 수 있는 링크 상태를 이용해 선택하는 방법이다 종류 설명 : l i n k 한 번도 방문하지 않은 링크일 때 선택한다. : v i s i t e d 한 번이라도 방문한 적이 있는 링크일 때 선택한다. 아래의 예시를 보면 이해하기 쉽다 네이버 구글 코드를 실행하면 아래와 같은 결과를 볼 수 있다 2. 동적 가상 클래스 선택자 사용자의 어떤 행동에 따라 동적으로 변하는 상태를 이용해 선택자를 지정하는 방법이다...

가상 요소 선택자는 HTML 문서에 명시적으로 작성된 구성 요소는 아니지만 마치 존재하는 것처럼 취급해 선택하는 선택자 지정 방법을 말한다. 앞에 :: 기호(콜론 2개)를 붙여서 사용하며, 기준 선택자와 함께 사용하는데 만약 기준 선택자를 생략하면 전체 선택자가 들어간 것으로 간주한다 형식) 기준 선택지::가상 요소 선택자{/* CSS 코드 */} 여러 가상요소 선택자 속성이 있지만 자주 사용하는 주요 가상 요소 선택자는 아래와 같다 종류 설명 ::befor 콘텐츠 앞의 공간을 선택한다. ::after 콘텐츠 뒤의 공간을 선택한다 ::befor 선택자는 기분 선택자 요소 앞의 공간을 선택하고, ::after 선택자는 기준 선택자 요소 뒤의 공간을 선택한다. 아래의 예시를 보면 이해하기가 쉽다 Hello ..

2023.07.21 - [CSS _HTML_JavaScript/CSS] - [CSS] CSS 기본 선택자 사용 조합 선택자는 앞서 정리한 기본 선택자와 함께 사용했을 때 선택자의 의미를 더 풍부하게 해 주는 선택자방법이다. 1. 그룹 선택자 그룹 선택자는 여러 선택자를 하나로 그룹 지을 때 사용한다. 선택자와 선택자는 , 기호로 구분한다. 형식) 선택자1, 선택자2, 선택자3, ... , 선택자n{/* CSS 코드 */} p{ color:red; } #title{ color:red; } .red{ color:red; } 위의 형식은 선택자는 다르지만 선언부는 똑같은 코드로 3개의 코드를 합치면 아래와 같다 p, #title, .red{ color:red; } 2. 자식 선택자 부모 요소의 하위에 있는 자..

기본 선택자를 간단하게 표로 정리하면 아래와 같다 전체선택자 *{ } 태그선택자 태그{ } 아이디선택자 #id{ } 클래스선택자 .class{ } 기본속성선택자 [속성]{/* CSS 코드 */} [속성=값]{/* CSS 코드 */} 1. 전체 선택자 전체 선택자는 HTML에서 사용할 수 있는 모든 요소를 한 번에 선택자로 지정하는 방법으로 * 기호를 사용해 표시한다 형식) *{/* CSS 코드 */} 전체 선택자로 모든 요소의 텍스트를 파란색으로 지정하려면 다음과 같이 작성할 수 있다 전체 선택자 전체 선택자는 모든 요소를 한 번에 선택할 수 있습니다. 위의 코드를 실행하면 아래와 같이 나온다. 결과를 보면 단순히 h1, p 태그만 선택되었다고 생각할 수 있는데 전체 선택자는 h1, p, 태그를 비롯해 ..

문제 . 아래에 제시된 CSS 코드를 CSS 적용 방법 대로 각각의 파일에 적용해 보시오 p{ color:red; } ▼▼▼ 아래에 정답 있어요 ▼▼▼ 1. 내부 스타일 시트 방법 더보기 DOCTYPE html> 내부 스타일 시트 p{ color:red; } 내부 스타일 시트 방법(internal) 2. 외부 스타일 시트 방법 더보기 DOCTYPE html> 외부 스타일 시트 방법 외부 스타일 시트 방법(external) ========================================= p { color: red; } 3. 인라인 스타일 방법 더보기 DOCTYPE html> 인라인 스타일 인라인 스타일 방법(inline)

작성한 CSS를 HTML 문서에 적용시키는 방법으로 대표적인 방법으로 3가지가 있다 1. 내부 스타일 시트 사용하기 내부 스타일 시트(internal style sheet)는 HTML 파일 내부에 CSS 코드를 작성하는 방법이다. HTML에서 제공하는 태그 중에 style 태그가 있는데 style 태그의 콘텐츠로 CSS 코드를 작성하면 된다. 실제 코드에서 내부 스타일 시트 방법으로 CSS를 적용할때는 아래와 같이 적용하면 된다. 내부 스타일 시트 style 태그를 사용하는 위치는 정해진 기준이 없지만 앞의 코드처럼 head 태그 안에 사용한다. 웹 브라우저는 HTML 문서를 해석할 때 HTML 문서에 작성된 코드를 첫 번째 줄부터 순차적으로 해석하며 표시되는 내용은 body 태그 안에 작성한다. hea..

1. 문법 설정 CSS 문법은 크게 선택자와 선언부로 구분한다. 선택자는 CSS 스타일을 적용할 HTML 태그(요소)를 선택하는 영역이다. 선언부는 선택자에서 선택한 태그에 적용할 스타일을 작성하는 영역으로, 중괄호({}) 안에 넣는다. 선언부에 작성하는 스타일은 반드시 속성과 값을 한쌍으로 작성한다. 이때 값의 뒤에 세미콜론(;)을 넣으면 여러 스타일을 연속해서 사용할 수 있다. 예를 들어 h1 태그의 텍스트 크기를 24px로, 색상을 빨간색으로 지정하고 싶다면 아래와 같이 작성할 수 있다. h1{ font-size:24px; color:red; } 2. 주석 CSS도 HTML 처럼 코드에 주석을 남길 수 있다. CSS에서는 주석 내용을 /*와 */ 사이에 작성한다 /* 주석 내용 */ HTML과 마찬..

1. 텍스트 관련 태그 HTML에서 텍스트에 사용할 수 있는 태그 hn 태그 : 주제나 제목 성격의 텍스트를 작성할 때 p 태그 : 텍스트로 문장 또는 단락을 구성할 때 사용 br 태그 : 텍스트를 줄 바꿈 할때 사용 blockquote 태그 : 문단 단위의 인용문을 작성할 때 사용 q 태그 : 문장 단위의 짧은 인용문을 작성할 때 사용 ins 태그 : 추가할 텍스트를 표시할 때 사용 del 태그 : 삭제할 텍스트를 표시할 때 사용 sub 태그 : 아래 첨자를 표시할 때 사용 sup 태그 : 위 첨자를 표시할 때 사용 2. 그룹을 위한 태그 HTML에서 그룹화에 사용하는 태그로 div, span 태그가 있는데 이 태그들은 태그 자체에 어떠한 의미도 없다. 3. 목록을 만드는 태그 목록을 생성할 때는 ul..

문제 1. 태그를 적절히 사용해 다음 포스트잇 UI를 HTML코드로 작성하시오 (CSS는 제외) 문제 2. 태그를 적절히 사용하여 아래의 이미지와 같은 로그인 화면 UI를 HTML 코드로 작성해보시오(CSS 제외) 문제 3. 태그를 적절히 사용하여 아래의 이미지와 같은 위키백과 사이트의 목차를 HTML 코드로 작성해보시오 ▼▼▼ 아래에 정답 있어요 ▼▼▼ 문제 1번 풀이 더보기 DOCTYPE html> PostIt To. 남편 여보~ 오늘 급하게 먼저 출근해야 해서 인사도 못하고 먼저 나가요~ 아침 굶지 말고 냉장고에 있는 반찬 전자레인지에 데워서 챙겨 먹고 나가요~ 그럼 오늘 하루도 힘내고 이따 저녁에 봐요~ 화이팅~! 문제 2번 풀이 더보기 DOCTYPE html> login 로그인 Log in wi..