728x90 css16 [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. [NodeJs] 애플 홈페이지 프론트엔드+백엔드 (풀스택) 샘플코드 Apple HomePage / front-end / back-end / Full Stack Sample Code 프론트엔드 + 백엔드 풀스텍 연습겸 애플 홈페이지 스타일의 웹사이트를 만들어보았다. 수정을 통해 본인의 웹사이트로 사용하여도 좋고, 소스를 다운 받아 본인의 학습 용도로 사용해도 좋다. 프론트엔드 사용 기술 목록 1. Html (Html5 표준 사용) 2. Css (프레임워크 없이 순수 CSS5만을 사용하여 가볍게 동작 구현) 3. Javascript (라이브러리 사용 없이 순수 바닐라 자바스크립트만을 사용) 백엔드 사용 기술 목록 1. NodeJs (반응형 메인 페이지를 우선 구현해 보았는데, 이후 포스팅에서 상품 상세페이지 등 다양한 페이지 추가 구현할 예정이다) 2. json (서버측의 .. 2021. 3. 22. [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] 마우스 오버 이벤트 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. [CSS] 짝수/홀수 번째 태그에만 style 효과 주기 CSS 짝수 홀수 번째 엘리먼트 Select 하기 CSS를 작성하다 보면 여러 태그에 같은 style을 설정할 일이 많은데 Class를 통해 따로 지정하여 style 효과를 설정해도 되지만 홀수번째, 짝수 번째와 같이 교차 효과를 설정할 필요가 있을때는 Selector를 통하여 간단한 코드를 통해 설정이 가능하다. 엘리먼트명:nth-child(even) 짝수번째 엘리먼트 Select 엘리먼트명:nth-child(odd) 홀수번째 엘리먼트 Select 샘플 예제 body { margin : 25px; } .container { display : flex; flex-direction : column; } .item { width: 50px; height: 50px; margin-bottom : 5px; } .. 2021. 3. 20. [HTML5] Data 속성 (Data Attribute) HTML5 Data-* 속성 Data Attribute HTML5에서 data-* 속성 은근 사용 빈도가 높다. data-* 속성은 거두절미하고 태그에 간략한 데이터를 저장하는 것이다. HTML5 이전에는 Html 문서 내에 데이터를 저장하기위해 태그를 안보이게하고 해당 태그에 밸류값을 넣어놓고 사용하는 등 여러가지 핵스러운 방법이 동원되었는데, data-*속성을 사용하면 간결한 코드에 유지보수가 용이해지고 자바스크립트를 통한 데이터 접근이 간단해진다. 사용 방법은 아래와 같이 간단하다. HTML 태그 내 데이터 속성 사용 Javascript에서 데이터 추출 const element = document.querySelector('...'); const data = element.dataset.데이터속성이.. 2021. 3. 13. 이전 1 2 다음 728x90
