상세 컨텐츠

본문 제목

0721 퍼블리싱 기초 수업 #3. css ,기초

카테고리 없음

by moonddang 2023. 7. 23. 21:06

본문

css 적용하는 방법 3가지

-내부 css / 외부css /인라인css
주로 할 방법은 외부css

외부와 내부는 파일로 나누어서 저장을 하냐 아니면 <head>사이에 저장을 하냐에 따라 나뉨

 

css쓰는 방법

: 선택자{속성:값 ; 속성:값 ; 속성:값;;,}  (속성 여러개 적을 수 있음)

 

내부 스타일 시트

<head>

    <style>

</head>

 

우리가 알아야할 속성

-문자관련 속성

-배경관련 속성

-마진, 패딩

-보더, 외곽선

-마우스 오버시 색바뀜, 이미지 커짐과 관련된 가상 선택자

-트랜스폼, 트랜지션 관련 속성

-레이아웃 속성(float, position, flex, grid)

 

 

<문자 관련 속성>

(두 단어가 연결될땐 대시로 연결함)

  • color:문자색
    • hex코드: #ff0099(둘씩 반복될때는 #f09로 축약해서 써도됨)
    • rgb : (255,255,255(흰색))~(000,000,000(검정)) 
    • rgba : rgb + 마지막은 투명도를 나타냄 (0(0%)~1(100%)까지) 
      • 예) (255,255,255,0.5(0안붙이고 '.5'로도 가능))-투명도 50%
  • font-size : 문자크기
    • 스타일을 적용하지 않을때 폰트사이즈는 기본이 16px이다. 
  • font-family :서체지정
    • 브라우저마다 기본서체가 다르다. 사파리, 크롬의 기본 서체로 렌더링된다. 
    • 폰트를 지정할 수있는데 내 컴퓨터에 없는 서체로 지정하면 렌더링이 안되고 기본서체로 렌덩링된다.
    • 그래서 대부분 구글폰트를 사용한다. 구글폰트는 서버에 있는 서체를 가지고와서 쓸 수 있어서 렌더링 가능
  • font-style : italic, normal 
  • fint-weight : 서체두께
    • bold
    • 두께종류- 400,500,600,700,800 (폰트에 따라 있는게 다르다)
  • line-height : 행간
    • 스타일 적용이 안된 폰트의 행간은 기본 1.2 
    • 픽셀로 넣거나(24px) 혹은 배수로 입력 (1.5)
  • letter-spacing : 글자사이 간격 (예) -1px
  • word-spacing : 단어사이 간격(거의 쓸일이 없음)
  • text-decoration: unerline(밑줄)

 

    <style>
        /* CDN(content delivery network) */
        h1{
            color:#27c2ff;
            font-size: 20px;
            font-weight:normal;
            font-family: 'nanum gothic', sans-serif;
        }
        p{
            text-decoration:underline;
            color:#666;
        }
        h2{font-family:"궁서"}
        .list{color: aqua;}
        #login{
            color: #666;
            font-size: 24px;

        }
    </style>

선택자{ 속성값 }

-선택자: 태그의 이름을 선택자로 준다.

**h1은 기본적으로 bold로 들어간다. 그게 싫다면 font-weight를 normal로 속성 바꿔주기

요소 검사에서 사용자 에이전트 스타일-h1에 디폴트로 있었던 값이 표시됨

 

       p{
            text-decoration:underline;
            color:#666;
        }

 

**줄수가 길어지면 파일용량이 커져서 보통 붙여서 씀

 

 

https://fonts.google.com/

 

Browse Fonts - Google Fonts

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

fonts.google.com

 

체계는 폰트마다 다르다

**보통 구글 폰트에서 가져오진 않고 직접 다운로드 한다

1) 내가쓸 폰트두께를 선택한다.

2) link와 import의 차이

-link :html로 불러오는 것, import: css안으로 불러들이는 것(스타일 태그 안에 함)

-둘중 아무거나 사용해도 무관

3) 복사하기>붙여넣기

 

<style>
        /* CDN(content delivery network) */
        h1{

얘를 불러올려면 이렇게 폰트 패밀리를 불러야한다는 규칙

카피해서 붙여넣기(혹은 직접 nanum gothic이라고 써도 됨)

font-family: 'nanum gothic', sans-serif;

이 서체가 없을 시 콤마 뒤에 산세리프로 렌더링 하기라는 명령

 

 

***CDN: contents delivery network

-만들어진 코드를 붙여넣기해서 연결해서 쓰는 것

 

 

---

<선택자 종류>

  • 태그 선택자: 해당 태그의 이름을 쓰면 됨
  • class 선택자 : 중복되는 태그에서 특정요소만 / 여러 요소에 사용가능
    • 클래스의 이름을 줄때는 영문이나 숫자, 영문+숫자로 주면됨, 숫자로는 시작못함 
    • 호출시: .클래스명
  • id : 딱 하나의 요소에만 사용가능
    • 호출시 : #아이디명
    <ol>
        <li class="list">리스트1</li>
        <li class="list">리스트2</li>
        <li>리스트3</li>
        <li>리스트4</li>

li에서 리스트1,2만 색깔을 주고싶다

.list{color: aqua;}

2) 로그인에만 색과 폰트 사이즈를 주고싶다

 <dl>
        <dt>유틸리티</dt>
        <dd id="login"> 로그인</dd>
        <dd>장바구니</dd>
    </dl>

스타일 태그로 가서 

#login{
            color: #666;
            font-size: 24px;

        }

 

 

----

 

 

내가 작성한 태그가 문법에 맞는지 알고싶다면?

https://validator.w3.org/#validate_by_input

 

The W3C Markup Validation Service

Validate by File Upload Note: file upload may not work with Internet Explorer on some versions of Windows XP Service Pack 2, see our information page on the W3C QA Website.

validator.w3.org

url이나 다이렉트로 코드 넣

error:문법상 틀린것, warning : 권고사항

 

----------------

 

이미지를 가져올 때는 삽입이라는 개념이 없고 경로에서 가지고 오는 개념밖에 없다.

이미지를 가져오는 방법 
-절대 경로 : 서버에 있는 이미지를 가져오는 것 -URL적기, 경로를 설정하는 것
-상대 경로 : 내 컴터에 이미지가 있어서 불러오는 것(서버에 올려져있는게 아닌)

<img src="주소(경로)" alrt="이미지 설명문"> (img는 단독태그)
- alt:대체 텍스트(없으면 문법에 어긋남)



티스토리툴바