[project] 포트폴리오 웹사이트_css

오늘은 포트폴리오 웹사이트 만들기 css 스타일링을 공부하였다.

 

첫 번째는 global 값을 지정하였다.

자주 쓰는 color, font size, font weight, size 값을 :root{}에 지정하였다.

:root{
    /* Color */
    --color-white: #ffffff;
    --color-green: #023224;
    --color-gray-blue: #02241B;
    --color-black: #000000;   

    /* Font size */
    --font-large: 48px;
    --font-medium: 28px;
    --font-regular: 18px;
    
    /* Font weight */
    --weight-bold: 700;
    --weight-semi-bold: 600;
    --weight-regular: 400;
    
    /* Size */
    --size-border-radius: 4px

}

 

다음으로는 universal tag를 지정하였는데,

기본으로 모든 box-sizing을 border-box로 지정해주어서, padding 값까지 box 사이즈에 포함되게 하였다.

또, body에는 margin: 0, google font, cursor: default 값을 지정해주었고, 

a tag의 text-decoration을 없애주었다.

ul tag의 list-style을 없애어 bullet을 없앴다.

/* Universal tags */
*{
    box-sizing: border-box;
}

body{
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    cursor: default;
}

a{
    text-decoration: none;
}

ul{
    list-style: none;
    padding-left: 0;
}

 

다음으로는 typography를 설정하여, 폰트별 size, weight, margin 등을 일정하게 지정하였다.

/* Typography */
h1{
    font-size: var(--font-large);
    font-weight: var(--weight-bold);
    color: var(--color-black);
    margin: 16px, 0px;
}

 

이렇게 글로벌 세팅을 마친 후 블록단위 컴포넌트를 꾸미기 시작하니, 너무나 편했다.

기존에 했던 방식과는 다르게, 값을 매번 입력해야 하는 수고로움이 덜어지는 것이다.

 

오늘 참 좋은 것을 배웠다!