728x90 html7 [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. [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] transform - Translate 수평, 수직 정렬 CSS 수평 수직 정렬 Transform - translate CSS 를 사용하다보면, 좌우,상하 가운데 정렬을 해야할 일이 많다. 가운데 정렬할수 있는 방법에는 다양한 방법이 있지만, transform 속성 또한 상당히 많이 사용이 되고 있다. CSS Selector { transform : translate(좌우, 상하); } 샘플예제 출력 결과 코드 수정 .container > .box { width : 200px; height: 200px; background : royalblue; /*하단의 코드 추가*/ transform : translate(100%,100%); } 출력 결과 2021. 3. 4. [CSS] BEM (Block Element Modifier) 표기법 코드는 가독성이 중요하다. 하지만 코드양이 많아지면 그만큼 클래스명도 다양해지고 구조 또한 복잡해진다. 그래서 클래스 명의 명확성과 일관성, 의미론을 유지할수 있는 CSS 표준에는 BEM 표기법이 있다. BEM 은 Block Element Modifier 의 약자이다. 클래스 이름 안에 언더바 두개씩 있고, 마이너스 표시가 그 뒤에 두개씩 있는 경우를 접해본적이 있다면, 그게 BEM 을 활용한 클래스의 표기이다. 예시) main__item--blue 하지만 간혹 보면 BEM 표기법을 아이디에 사용하는 경우도 종종 있는데, 이는 잘못된 방법으로, 클래스에만 사용하여야 한다. 하단의 간단한 예제를 통해 BEM 의 의미를 이해하도록 하자 샘플 예제 Html 설명 Block : Element : Modifier.. 2021. 3. 4. [프론트엔드] 쇼핑몰 상품 정렬 코드샘플 (Html,Javascript,Css) Sample Code 쇼핑몰 상품 정렬 코드 샘플 HTML5 , Vanilla Javascript, Css3 1. 설명 : 온라인 쇼핑몰에서 흔히 볼수있는 상품 정렬 코드 샘플이다 2. 사용언어 : Javascript, Html, Css [플러그인 사용 x] 3. 구동 로직 - 상품 Sample 이 없어서 짱구는 못말려 케릭터로 대체 (1) fetch API 를 통해 서버측의 json 데이터 Get (2) json파일(상품 객체 리스트) 저장 (3) 해당 리스트 출력 (4) 이후 선택 옵션에 따른 filter 처리 후 출력 [샘플 코드 :Html] 짱구 철수 유리 훈이 [샘플코드 :Css] :root{ /* color */ --color-white : #f4f9f9; --color-black : #0d335d; --color.. 2021. 2. 24. [Html] 기본 구조 - 태그와 엘리먼트 개념 Tag / Element Html은 HyperTextMarkupLanguage 의 약자로 프로그래밍 언어가 아닌 웹 개발시 웹페이지의 구조를 표현 하는 마크업 언어이다. 쉽게말해서, 웹개발자와 브라우저 사이에 의사 소통할수 있는 언어이다. 웹개발자 브라우저 우선 html을 출력부터 해보자. 메모장을 새로 만들기 하여, 다른 이름으로 저장하기를 누르고, 파일 이름을 index.html로 저장한다. index.html 파일을 만들었다면, 아래 예제를 실행해보기를 권장한다. 샘플 예제 ↓ 웹 개발자가 "메모를 메모하다"라는 문장을 브라우저에게 문장이라고 이야기해주려면, 아래와 같은 소스를 작성해야한다. 사용 태그 : p 메모를 메모하다 소스 작성을 완료 하였다면, 파일을 저장하고 더블클릭하여 실행하여, 웹페이지에서 출력 결과를 확인한.. 2021. 2. 3. 이전 1 다음 728x90
