citeFred’s Blog

/

/

citeFred’s Blog

/

/

Share

🏷️

HTML,CSS

# of Posts

7

1 more property

Gallery

Search

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

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

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

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

전체 Wrapper 1개와

반응형은 브라우저의 크기(px)에 반응하도록 설계되어 있었다.

내가 조건문으로 사용한 부분은 다음과 같다.

조건1. 딱 1263픽셀 이상일 때, PC 버전 브라우저 모습을 갖춘다. 왼쪽 사이드바가 생성되며 내 2개의 div는 block으로 그 안에 세로로 정렬 되어야 한다.

조건2. 딱 1262픽셀 이하, 738픽셀 이상일 때, 태블릿 버전 브라우저 모습을 갖춘다. 왼쪽 사이드바가 상단으로 이동되며 내 2개의 div는 block-inline 처럼 그 안에 가로로 정렬 되어야 한다.

CSS 기초 단계에서는 이러한 기능은 배운적이 없어서 필요한 기능 위주로 검색을 해서 좀 부족하게 구현했지만, 동작 원리를 확인하고 보니 완성도가 낮더라도 어떻게 작동하는지 파악 할 수 있었다.

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

HTML, CSS 기초

배운점:

어려운 점:

배운점:

어려운 점:

웹 페이지 만들기

배운점:

어려운 점:

웹 페이지 배포(git page) 활용

배운점:

어려운 점:

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

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

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

linear-gradient 보정 후

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

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

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

button, input 박스 등이 division 내부에 포함 될 때 해당 요소의 배경색이 뒷 배경을 가리게 된다

이런 상황 자체가 문제되지는 않지만 트렌드에서 벗어난 스타일?(촌스럽다.)

백그라운드 색상 제거 (투명화) transprent를 사용하고 테두리 색상을 주면 좀더 요즘 홈페이지의 느낌을 살릴 수 있다.

여기에 추가적으로 "hover"(마우스 커서가 올라간 경우) 테두리 강조 이벤트를 추가하면

좀더 세련된 느낌을 줄 수 있다.

[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탭에 입력 할 수 있는 폰트 코드 링크가 제공된다.

4. 해당 코드를 작성중인 HTML 문서의 style 태그 내 삽입

5. 선택자를 통해 원하는 폰트 적용

이후 다시 Google Fonts의 세부정보 창 @import 하단의 "CSS rules to specify families"의 내용을 복사하여

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

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

협업 시 분리 작업 가능

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

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

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

index.html에 있을때와 동일한(style이 동일) 결과를 얻을 수 있다. 태그에 직접 입력하는 하드코딩보다 이와 같이 css파일을 분리하여 관리하면 협업시에도 style 이 적용안되거나 충돌이 생기는 부분을 최소화 할 수 있다.

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

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

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

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

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

1주차 강의를 통해

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

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

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

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

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

css 주요 태그로는

color(text),background-color:(background), font-size, font-family, margin, padding, text-align, width, height, border 등

태그 내의 여러 속성값을 지정하는 방법에 대해서 익숙해지고 검색을 생활화해야 한다.

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