728x90 프론트엔드/CSS24 [CSS] 마우스 클릭 금지, 안되게 막기 및 해제 🤞 CSS 마우스 클릭 금지, 안되게 막기 pointer-events : none; 기본 형태 CSS Selector { //포인터 안되게 막기 : none pointer-events : none; } CSS Selector { //포인터 다시 동작 : auto pointer-events : auto; } 샘플 예제 클릭 영역 클릭 금지 영역 출력 결과 2021. 4. 17. [CSS] CSS Selector 선택자 우선순위 CSS Selector 선택자 우선순위 1. CSS 같은 속성 여러번 설정한 경우 메모를 메모하다 정답 : 메모를 메모하다 소스의 흐름대로 적용 된다. 처음엔 orange였다가 하위 코드로 인해 blue 로 바뀐다. 2-1. 다른 셀렉터를 통한 설정 (* vs 태그명) 메모를 메모하다 정답 : 메모를 메모하다 더 구체적인 셀렉터에서 설정한 값이 우선된다. 2-2. 다른 셀렉터를 통한 설정 (태그명 vs 클래스명) 메모를 메모하다 정답 : 메모를 메모하다 더 구체적인 셀렉터에서 설정한 값이 우선된다. (태그보다는 클래스가 더 구체적) 2-3. 다른 셀렉터를 통한 설정 (태그명.클래스명 vs 클래스명) 메모를 메모하다 정답 : 메모를 메모하다 .test-class 앞에 전체를 의미하는 *가 생략이 되어있는 .. 2021. 4. 15. [CSS] 폰트 크기 설정 font-size CSS 폰트 크기 설정 Font-size CSS 폰트 사이즈 설정 방법은 여러가지가 있지만 그중 대표적으로 두가지를 소개하고자 한다. 첫번째. HTML 태그에서 style 속성을 이용하여 직접 설정 두번째. CSS 파일에서 CSS Selector를 통해 설정 1. HTML 엘리먼트 직접 설정 기본 골격 This is Sample 샘플 코드 안녕하세요 티스토리 방문을 환영합니다. 출력 결과 2. CSS 파일내 CSS Selector를 통해 폰트 사이즈 설정 기본 골격 /*CSS Selector를 통한 폰트 사이즈 설정*/ CSS Selector { font-size:원하는사이즈; } 샘플 코드 [HTML] 안녕하세요 티스토리 방문을 환영합니다. 샘플 코드 [CSS] /*CSS Selector를 통한 fon.. 2021. 4. 11. [CSS] border 테두리 속성 설정하기 CSS 테두리 속성 설정하기 border CSS 테두리는 대표적으로 총 세가지로 설정하는데 다음과 같다. 1. 테두리 굵기 (width) 2. 테두리 스타일 (style) 3. 테두리 색상 (color) 이를 설정하는 방법은 세가지 각각의 속성으로 설정하여도 되고 한번에 설정하여도 되는데 아래 기본 형태를 참고하자 기본 형태 //테두리 스타일 세가지 속성 각각 설정하는 경우 CSS Selector { //원하는 테두리 굵기 border-width : 1px; //원하는 테두리 스타일 border-style : solid; //원하는 테두리 색상 border-color : grey; } //테두리 스타일 세가지 속성 한번에 설정하는 경우 CSS Selector { //원하는 테두리 굵기, 스타일, 색상 순.. 2021. 4. 6. [CSS] 모서리 모양 변경하기 border-radius CSS 모서리 둥글게 변경하기 border-radius 원 (동그라미) 만들기 1. HTML에 style 속성 직접 입력을 통한 변경 방식 기본 형태 //Html 태그 내 style 속성을 이용한 직접 입력 방식 샘플 예제 출력 결과 2. CSS 파일 변경을 통한 모서리 모양 변경 기본 형태 //CSS 파일 변경을 통한 모서리 모양 변경 CSS Selector { border-radius : 둥글기%; } 샘플 예제 : HTML, CSS .box { background:red; margin : 20px; width: 200px; height: 200px; border-radius : 5%; } .box2 { background : blue; margin : 20px; width: 200px; height.. 2021. 4. 3. [CSS] 배경 색상 변경하기 background color CSS 배경 색상 변경하기 배경 색상의 변경 방법은 여러가지가 있지만 쉽게 적용할수 있는 대표적인 방법으로 두가지가있다. 첫번째는 HTML상에서 태그에 style속성을 이용하여 배경색상을 입히는 방식과 두번째는 CSS 파일에서 CSS Selector를 통해 배경색상을 입히는 방식이 있다. 1. HTML 상에서 태그 직접 입력 기본형태 //HTML 태그 내 Style 속성을 이용한 배경 색상의 변경 샘플코드 출력 결과 2. CSS 파일을 통한 배경 색상 변경 기본형태 //CSS 파일 내 CSS Selector를 통한 배경색상 변경 방식 CSS Selector { background-color:#ffffff; } 샘플코드 : HTML, CSS .red{ background-color:#d44000; widt.. 2021. 4. 3. [CSS] 폰트 (문자) 색상 설정 하기 font color set CSS 폰트 문자 색상 설정하기 1. style 속성을 활용한 HTML 태그 직접 변경 기본 형태 //태그내 style속성을 통한 폰트 색상 설정 이것은 폰트입니다. 샘플 예제 빨강색 주황색 노랑색 초록색 파랑색 출력 결과 2. css 파일을 통한 폰트 색상 변경 기본 형태 적용원하는 태그/클래스/아이디 명 { color : #ffffff; } 샘플예제 : HTML 파일 빨강색 주황색 노랑색 초록색 파랑색 CSS 파일 .red { color : #be0000; } .orange { color : #e2703a; } .yellow { color : #f7ea00; } .green { color : #3a6351; } .blue { color : #046582; } 출력결과 2021. 4. 2. [CSS] 엘리먼트 투명도 조절 opacity CSS Element 투명도 조절 opacity css 에서 opacity 속성을 이용해 해당 엘리먼트의 투명도를 조절할수 있다. 투명도는 0~1까지로 조절이 가능하며, 소수점의 사용으로 흐리거나 진하게 조절할수 있다. 사용 예제 [CSS] 엘리먼트명 { /* 투명도 10% */ opacity : 0.1; /* 투명도 30% */ opacity : 0.2; /* 투명도 50% */ opacity : 0.5; /* 투명도 70% */ opacity : 0.7; /* 투명도 100% */ opacity : 1; } 2021. 3. 20. [CSS] 가로 세로 가운데 정렬 CSS 가로 세로 가운데 정렬 CSS로 텍스트나 엘리먼트를 부모 엘리먼트 내 가로 세로 모두 가운데 정렬로 style을 지정해야 하는 경우가 많다. 아래 가장 자주 사용하는 2가지 방법을 나열해 보았다. 첫번째 text-align 속성과 line-height 속성을 사용 [가운데 정렬할 컨텐츠가 텍스트 (position : inline)성질인 경우에만 가능] 엘리먼트명 { /* 가로축 가운데 정렬 */ text-align : center; /* 세로축 가운데 정렬 */ line-height : center; } 두번째 flex를 통한 justify-content, align-items를 사용 엘리먼트명 { display : flex; /* 가로축 가운데 정렬 */ justify-content : cent.. 2021. 3. 20. [CSS] 마우스 오버 이벤트 hover CSS 엘리먼트 위에 마우스 올렸을때 발생하는 이벤트 hover CSS selector 유형 /* 엘리먼트에서 이벤트 발생 + 해당 엘리먼트에 효과주기*/ 엘리먼트명:hover { 원하는 효과 입력 } /* 부모 엘리먼트에서 이벤트 발생 + 해당 엘리먼트의 자식 엘리먼트에만 효과주기 */ 부모엘리먼트명:hover 자식엘리먼트명 { 원하는 효과 입력 } 샘플예제 (부모 엘리먼트에 hover 이벤트 + 부모 엘리먼트에 효과) body { margin : 50px; } .container { display : flex; justify-content : center; align-items : center; width: 200px; height: 200px; border-radius : 50%; backgroun.. 2021. 3. 20. 이전 1 2 3 다음 728x90
