코드그라데이션

가상 클래스 사용자 동작에 반응 특정 동작을 할 때 스타일이 바뀌도록 만들고 싶으면 사용 1) 방문하지 않은 링크에 스타일을 적용하는 ‘link 가상 클래스 선택자’ 웹 문서의 링크 중에서 사용자가 아직 방문하지 않은 링크에 스타일을 적용 텍스트 링 크는 기본적으로 파란색 글자와 밑줄로 표시됨 이 때 링크의 밑줄을 없애거나 색상을 바꾸려면 ：link 선택자를 사용한다. 2) 방문한 링크에 스타일을 적용하는 ‘:visited 가상 클래스 선택자’ 웹 문서의 링크 중에서 한 번 이상 방문한 링크에 스타일을 적용 한 번 이상 방문한 텍 스트 링크는 보라색이 기본값. 이 때 사용자가 방문한 텍스트 링크와 색상이 달라지 지 않게 하려면 :visited 선택자를 사용해 조절한다. 3) 특정 요소에 마우스 포인터를 ..

특정 속성이 있는 요소를 선택하는 [속성] 선택자 속성값에 따라 원하는 요소를 선택할 수 있다. 대괄호 사이에 원하는 속성을 입력하면 된다. ex. a 요소 중에서 href 속성이 있는 요소 선택하기 예제 메인 : 1 2 3 4 5 실행 결과 [속성 = 속성값] 선택자 : 특정 속성값이 있는 요소를 선택 주어진 속성과 속성값이 일치하는 요소를 찾아 스타일을 적용할 때 사용 ex. a 요소 중에서 target 속성값이 '_blank' 인 것만 선택하기 예제 - 새 탭으로 열리는 링크에만 아이콘 추가하기 HTML CSS Selector Level 3 미디어쿼리 실행 결과 [속성 ~= 값] : 여러 값 중에서 특정 속성값이 포함된 속성 요소를 선택 속성이 하나면서 속성값이 여러 개일 때 특정 속성값을 찾는 데..

연결 선택자 둘 이상의 선택자를 연결해서 스타일이 적용될 요소가 어느 부분인지 지정하는 역할을 수행 하위 요소 특정 요소를 기준으로 그 안에 포함된 요소를 의미 자식 요소 현재 요소를 기준으로 바로 한 단계 아래 요소 손자 요소 자식 요소의 한 단계 아래 요소 * 연결 선택자의 종류와 설명 1) 하위 선택자 (= 자손 선택자) 부모 요소에 포함된 하위 요소를 모두 선택 자식 요소 뿐만 아니라, 손자 요소, 손자의 손자요소 등 모든 요소들까지... 상위 요소와 하위 요소를 공백으로 구분한다. 예제 - 모든 하위요소에 글자색 빨간색으로 지정 aaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbb ccccccccccccccccccccc dddddddddddddddddd 실행 결과 2) 자식 선택자 하..

선형 그라데이션 색상이 수직 또는 수평, 또는 대각선 방향으로 일정하게 변하는 것 linear-gradient : 이걸 만들어주는 함수 선형 그라데이션 관련 속성 각도 선형 그라데이션에서 색상이 바뀌는 방향을 알려주는 방법 각도는 그라데이션이 끝나는 부분. 값은 deg 로 표기 방향 방향 지시할 때는 끝 지점을 기준으로 to 예약어와 함께 사용한다. to 다음에는 수평 방향 left나 right / 수직 방향 top 이나 bottom 색상 중지점 2가지 색 이상의 선형 그라데이션을 만들 때. 색상이 바뀌는 부분을 지정해 주어야 한다. 그라데이션에서 바뀌는 색을 색상 중지점이라고 함. 쉼표로 색상을 구분 색상만 지정할 수도 있고, 색상과 함께 중지점의 위치도 함께 지정할 수 있다. 예제 - 세 가지 모두 ..

배경 지정하는 속성 background-color : 배경 색 지정하는 속성 스타일 상속에 따르면 글꼴이나 글자 크기 등은 태그 선택자에서 지정하면 문서 전체에 상속 따로 하위 요소에서 스타일을 수정하지 않는 한 문서 전체에 똑같이 적용된다. 예외로 background-color 값은 상속되지 않는다. background-clip : 배경색의 적용 범위를 조정하는 속성 속성값 예제 고양이 현존하는 모든 집고양이들은 대략 2000만년 전에 하나의 조상으로부터 갈라져 나온 것으로 추측되며, 그 중 고양이의 조상으로 여겨지는 것은 아프리카들고양이(Felis lybica)라는 동물이다. 중동에 살던 인류가 약 만년 전에 사막고양이를 가축화하여 인간과 함께 살기 시작한 것으로 생각된다 고양이 현존하는 모든 집고양..

1. 웹 문서의 레이아웃 display : 배치 방법 결정하는 속성 블록 레벨 요소와 인라인 레벨 요소를 서로 바꿔서 사용할 수 있음. display 속성값 예제 - 디스플레이 속성 menu 1 menu 2 menu 3 menu 4 실행 결과 float : 왼쪽이나 오른쪽으로 배치하는 속성 문단의 왼쪽이나 오른쪽에 이미지를 나란히 표시해야 하는 경우, 는 블록 레벨 요소이므로 이미지와 나란히 한 줄에 배치할 수 없다. 이 때 float 속성을 이용하여 이미지를 표시하고 그 주변에 텍스트가 둘러싸도록 만든다. 속성값은 다음과 같다. 예제 asdjfkjasdlfjklasdjflkasdjfkljasdklfjadslkfjkasdlfjlkasdjfkldsajfkldsajfdlskfjdskfdsjflasdkfjds..

테두리 스타일 지정하기 박스 모델을 사용해 웹 문서에 요소를 배치하려면 각 박스 모델의 크기와 여백, 테두리 스타일 등을 고려해야 한다. 특히 테두리 스타일은 점선인지 실선인지 뿐만 아니라, 테두리 두께와 색상을 지정할 수 있다. 박스 모델의 방향 맨 위쪽은 top 오른쪽은 right 아래는 bottom 왼쪽은 left 시계 방향임을 기억하세요. box-style : 테두리 스타일 지정 - 기본값은 none box-style의 속성값 예제 실선 테두리 점선 테두리 짧은 직선 테두리 double groove inset outset ridge 실행 결과 border-width : 테두리 두께 지정 크기 직접 지정하거나 예약어를 입력 thin < medium < thick 순으로 두꺼워진다. 예제 실행 결과 ..

블록 레벨 요소, 인라인 레벨 요소 블록 레벨 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것. 한 줄을 차지 한다는 것은 해당 요소의 너비가 100%라는 뜻. 따라서 블록 레 벨 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없다. 블록 레벨 요소를 만드는 대표적인 태그로 , , 등이 있다. 예제 aaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbb cccbbbbbbbbbbbb ddddddddddddd eeeeeeeeeeeeeeeeee. 실행 결과 인라인 레벨 인라인 레벨 요소는 한 줄을 차지하지 않는다. 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있다. 따라서 한 줄에 인라인 레벨 요소를 여러 개 표시할 수 있다. 인라인 레벨 요소를 만드는 태그로 , , 등이 ..