Definition of Seon

CSS에서 사용자 지정 속성(CSS 변수)를 정의할 때는 전용 표기법이 있다.이 표기법은 SCSS와 CSS에서 사용하는 방법이 다르다. 1. 언제 사용하는가?복잡한 웹사이트에서 많은 값을 반복적으로 사용할 때,예를 들어 어떤 특정 색상을 반복적으로 사용할 때혹시 그 색상을 바꿔야하는 일이 생길 경우한 영역에 값을 저장해놓고 참조를 통해 값을 사용하는 것이 좋다. 2. CSS 변수:root { --main-bg-color: brown;}element { background-color: var(--main-bg-color);} root 위치에 선언할 경우 HTML 문서 어디에서나 사용자 지정 속성에 접근할 수 있다.이렇게 선언한 변수를 사용할 때는 var() 함수를 지정하고 매개변수로 사용자 지정 속성의..

::marker로 Marker 스타일링하기 리스트는 과 로 나뉜다.기본적으로 은 1. 2. 3. ...으로 글머리가 생기고은 작은 점으로 글머리가 생긴다.하지만 이 스타일이 마음에 들지 않는다면...?그럴 때 사용하는 css의 ::marker 기능!::marker { /* ... */} 원하는 리스트의 마커 요소에 스타일링을 추가할 수 있다.아래와 같이 사용하면 된다.li::marker { color: red; font-size: 1.5em;} 여기에 사용할 수 있는 프로퍼티는 다음과 같다.1. font properties모든 폰트 프로퍼티를 사용할 수 있다.font, font-size, font-family 등등...font-size를 다르게 한다면?약간 어색하지만 이런 결과도 가능하다.마커만 커..

CSS 폰트 (글꼴) 적용하기아름다운 웹사이트를 위해서 기본 폰트가 아닌 사용자 지정 폰트가 필요할 때가 있다.보통 프로젝트에서 폰트 설정은 가장 처음에 진행하는데,장기간 프로젝트를 하다보면 다음 프로젝트를 진행할 때 폰트 추가 방법을 까먹기 쉽다. CSS의 @font-face를 사용하면 웹페이지에 온라인 폰트나 폰트 파일을 적용할 수 있다.폰트 문법은 다음과 같다.@font-face { font-family: ; src: [,]*; [font-weight: ]; [font-style: ];} 1. font-family : 필수, 폰트명으로 사용할 이름을 지정해준다.2. src : 필수, 폰트 파일의 위치를 나타내는 Url을 url() 괄호 안에입력한다.대체 폰트가 있다면 쉼표 뒤에 추가로 입력..

Sass는 CSS 프로세서입니다. CSS만으로 작성한 코드는 복잡하고 관리가 어렵습니다. Sass는 CSS의 방식은 그대로 적용하되, 기능을 추가하여 관리를 쉽기 해줍니다. 컴파일러를 돌리면 컴파일러가 Sass코드를 CSS 코드로 변환해줍니다. 그래서 Sass를 CSS Pre-processor라고 부릅니다. Sass의 특징 1. 변수 제공 Sass에서 변수는 $ 달러 표시로 사용합니다. 2. 중첩 가능 nav ul li에 스타일을 추가하고 싶을 때 nav 안에 ul을 넣고 그 안에 li를 넣는 방법으로 중첩할 수 있습니다. 3. 연산자 4. partials, imports : 여러 파일에서 CSS를 쓸 수 있게 해주고 불러오게 해줍니다. 5. Mixins 재사용 가능한 코드 여러줄이 있는 변수라고 생각하..

HTML과 CSS를 잘 작성하기 위해서는 세 가지를 고려해야 합니다. 1. Responsive Design 반응형으로 작동하는 웹사이트를 만들어야 합니다. 미디어 쿼리나 fluid 레이아웃을 넘어서 화면에 맞는 글꼴과 이미지의 크기, 데스크톱 또는 모바일 중에 무엇이 먼저인지 등등을 고려해야 할 것입니다. 2. Maintainable and scalable code 유지가능하고 확장가능한 코드를 만들어야 합니다. 깔끔하고 이해하기 쉽고 확장성이 높은 코드를 써야 나의 코드를 보는 다른 개발자들에게도 좋습니다. 어떻게 마크업을 구조화하고 클래스 이름을 지어야 할지 등을 고려해야 합니다. 3. Web Performance 웹사이트를 더 빠르게 만들기 위해 우리는 httmp 요청과 코드 자체를 줄이고 코드를 ..

CSS 기본 설정 * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Lato", sans-serif; font-weight: 400; font-size: 16px; line-height: 1.7; color: #777; } 마진과 패딩을 0으로 설정하고 박스사이징을 보더박스로 설정합니다. 보더박스로 설정해야 너비와 높이를 잴 때 테두리가 포함되지 않습니다. 그리고 바디 안의 모든 하위요소에 상속이 되도록 글꼴과 두께, 크기, 줄간격, 색상을 설정합니다. 이렇게 설정해두고 시작해야 이후 CSS 코드를 입력하기 좋습니다.

Do it! HTML5 + CSS 03장 복습 1. 이미지 웹에서 사용할 수 있는 이미지 파일 형식 : GIF, JPG/JPEG, PNG href 속성 : 링크 문서 또는 주소 입력 target 속성 : 표시될 위치 -> (기본)현재 창_self 새창 _blank 부모 프레임에 표시 _parent 프레임 벗어나 전체 화면에 표시 _top download 속성 : 링크 내용 다운로드 rel : 현재 문서와 링크 문서의 관계 hreflang : 링크 문서 언어 지정 type : 링크 문서 파일 유형 닫기 전에 넣으면 이미지 링크를 만들 수 있음 앵커 : 한 페이지 내에서 한 번에 그 위치로 이동 텍스트 또는 이미지 -> 이동하고 싶은 위치에 텍스트 또는 이미지 -> 앵커 하나의 이미지에 여러 링크 걸기 (설..

Do it! HTML5 + CSS 02장 복습 1. 텍스트를 덩어리로 묶어 주는 태그 제목 표시 heading 단락 paragraph 줄 바꿈 break 수평 줄 horizontal 인용문 (들여쓰기) - cite 속성으로 인용 사이트 주소 표시 가능 입력 그대로 표시 preformat (공백 포함, 그러나 해당 부분은 소리로 읽히지 않아 접근성 떨어짐) 2. 텍스트를 한 줄로 표시하는 태그 굵게(강조) 굵게 bold 이탤릭체(강조) emphasis 이탤릭체 italic 인용 내용 표시 qoute (줄바꿈 없음, 따옴표로 표시됨) 형광펜 줄바꿈 없이 영역 묶기 (일부 텍스트 스타일 적용) 블록 단위 묶기(단락 통째로) 동아시아 글자 표시 취소선 strikethrough 밑줄 underline 3. 목록을..

Do it! HTML5 + CSS 01장 복습 HTML이란 Hyper Text Markup Language '하이퍼텍스트' 웹 사이트에서 링크를 클릭해 다른 문서나 사이트로 이동하는 기능 '마크업' 태그를 사용해 제목, 본문 등을 표시하는 것 즉, HTML은 웹 문서를 만드는 언어 HTML과 CSS를 배우면 웹 사이트, 앱 화면을 만들고 블로그를 수정할 수 있다. (+자바스크립트) HTML 문서 기본 구조 태그 사용법 - 태그는 를 이용해 구분한다. - 태그는 소문자로 쓴다. - 여는 태그와 닫는 태그를 입력한다. - 적당히 들여 쓴다. - 태그는 속성과 함께 사용할 수 있다. - 포함 관계를 명확히 해야 한다. 기본 태그 1. : 문서 유형 지정, html임을 알려줌 2. : 웹 문서 시작 3. ..

시작하며 내 문제를 해결하기 위해서 코딩을 배워야 한다. 얼마나 이 문제가 나에게 중요한지 생각해야 한다. 원인(code) -> 결과(app, program, webpage...) 웹페이지를 만드는 코드는 HTML(Hyper Text Markup Language) HTML의 특징 1. 쉬움 2. 중요함 - 가장 거대함 3. public domain - 저작권 X HTML 코딩의 단계 1. 기획 기획이란 무언가를 만들기 위해 상상하고 설계하는 과정 제목을 누르면 옆에 영상과 내용이 나오는 사이트를 만들자! 2. 환경 준비 코드 편집기 - Visual Studio Code 3. 기본 문법 학습 및 실습과 수정 HTML 기본문법 태그 글자 속성 태그 굵게 bold 굵게 (강조) < 밑줄 underline ~ ..