HTML,CSS

주말이라 좀 쉬면서 웹서핑을 하는데 내 블로그를 보니 흔한 테마로 사용했더니 너무 심심해보였다.

뭔가 추가 해볼만한 것이 없을까 생각되서 메뉴 헤더 부분에 이미지, Github 이미지와 링크를 연결하는데,

나의 티스토리 테마는 반응형으로 구현되어 있었다. 매번 백엔드에만 관심이 있었지만 프론트엔드의 반응형 웹이 변화하는 것이 항상 궁금하긴 했었다. 내가 원하는건 Most Used Languages 위젯의 크기가 커서, 반응형으로 브라우저 크기를 조절하면 메뉴가 삐져나오거나 한쪽으로 치우치고해서 꼴보기 싫었다. 아무리 티스토리 테마로 만들었다해도 HTML, CSS 수정이 가능하기 때문에 한번 수리할겸 프론트엔드는 어떤 코드를 쓰는지 살펴보았다. 우선 내가 아는 프론트엔드? 라고하기에도 기초적인 CSS 지식을 활용해서 테마 제작자의 HTML과 CSS를 살펴봤다.

내가 수정을 원하는 태그의 경로를 찾아내서 div로 덩어리들을 묶기 시작했다.

•

전체 Wrapper 1개와

[HTML, CSS]05 반응형 웹 CSS 작동 방식 @media은 조건문?

HTML, CSS 기초

•

배운점:

•

어려운 점:

CSS 활용

•

배운점:

•

어려운 점:

[HTML, CSS]04 HTML, CSS, 기초 원페이지 웹사이트 생성 배운점, 어려웠던점

linear-gradient 를 사용하여 이미지를 어둡게 보정 할 수 있다.

보통 은은하고 Dark한 느낌을 좋아하다 보니..

linear-gradient 보정 후

division태그 내부의 콘텐츠 (Text, Input, Button 등) 을 가운데 정렬하는 4줄 코드이다.

프로토타입 페이지 구성할때 그냥 외워서(ctrl c+v) 사용할 코드. 자주 사용될 것 같다.

이전에 text-align... block.. 등 생각보다 내 마음대로 움직이지 않던 부분인데 아래 코드로 쉽게 정렬 할 수 있음

[HTML, CSS]03 생각보다 쓸만한 CSS 응용편!

1. Google Fonts 페이지 방문

해당 페이지에서 Google이 제공하는 다양한 폰트를 확인 할 수 있다.

Browse Fonts - Google Fonts

Making the web more beautiful, fast, and open through great typography

https://fonts.google.com/?subset=korean

2. 원하는 폰트 선택

원하는 폰트 종류(Font-Family)를 선택한 이후 하단에 나열되는 폰트 세부 형태를 결정하고 "Select"를 클릭하면 우측 세부정보 창이 나타난다.

3. 폰트 참조 링크 복사

세부정보 창에서 copy code 탭의 "@import"를 선택하면

HTML style탭에 입력 할 수 있는 폰트 코드 링크가 제공된다.

[HTML, CSS]02 Google Fonts 스타일 적용하기

1.

메인 페이지의 코드를 간소화 시킴

2.

협업 시 분리 작업 가능

3.

프로젝트 관리 편리
head태그 내에서 링크태그를 통해 <style> 태그 내 꾸밈 코드들을 분리 할 수 있다.

index.html의 <head>에 추가된 내용

index.html의 style태그 코드는 모두 주석(삭제) 처리 했다.

[HTML, CSS]01 CSS 파일 모듈화(파일 분리)

아이디와 패스워드 input 속성인 type="text"와 type="password"를 활용

추후에 form태그로 감싸고 method 속성을 통해 통신해야 한다.

head태그에서 style태그를 통해 클래스, 아이디 등 선택자를 지정하여 다양한 style을 적용 시킬 수 있다.

[HTML, CSS]00 기초적인 로그인 페이지 생성

1주차 강의를 통해

HTML, CSS과 Bootstrap 활용을 빠르게 복습 할 수 있었다.

다시 천천히 코드를 작성하고 변화를 관찰하면서 코드 작성법을 익히고 있으며

관련 단축키들도 다시 익숙해지고 있다.

// HTML

html 주요 태그로는 !doctype 선언문과

html, head, body, div, h1-5, button, input, p, br, img src, label 등

[HTML, CSS]06 1주차 스터디(WIL)