[포스코x코딩온] 웹개발자 입문 과정 1주차 2 회고 | CSS

dazzle·2023년 3월 4일
0

포스코X코딩온

목록 보기
2/11

4일차로 접어들었고 3일차부터 css수업을 듣고 있다!
아직까지는 기본적인 수업이라 따라가기 어렵지않은 것 같다=3



🐾CSS

CSS는 Cascading Style Sheets(CSS)약어로
HTML작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어이다.

CSS는 웹 페이지에 스타일과 레이아웃을 적용할 때 사용한다.
글꼴, 색상, 크기를 조절하고, 콘텐츠의 간격을 조정하고,
페이지를 여러개의 열로 나누기 등을 할 수 있다.

< class > 란,
그룹으로 묶어서 스타일을 지정할 때 사용하는 코드
css 표기법 => .이름



👣 tag 종류


< class > 란,

그룹으로 묶어서 스타일을 지정할 때 사용하는 코드
css 표기법 => .이름


< id > 란,

한가지만 정해서 사용할 때 쓰는 코드 / 문서에 고유한 id는 하나만 쓸 수 있음
css 표기법 => #이름


class와 id 모두 이름은 자유롭게 지으면 상관없지만 숫자로는 시작하면 안됨!



< 자주 사용하는 코드 정리>

 * { ] => html 전체에 속성을 주는 것
   body { } => html body부분 전체 속성 주는 것
  • 배경관련
    background-color= ; => 배경에 깔리는 색상
    background-image= ; => 배경에 깔리는 사진(이미지)
    border-raius= ; => 테두리를 둥글게 하고 싶을 때 사용
ex) border = 1px solid black 
    border-raius= 10px;
  • 간격
    margin= ; => 지정한 블록이나 단락, 문장등 그 부분의 외부여백
    padding ; => 지정한 블록이나 단락, 문장등 그 부분의 내부여백
  • 사이즈
    width= ; => 세로
    height ; => 가로
  • 폰트(글자)
    font-size= ; => 글씨 사이즈
    font-weight= ; => 글씨 굵기
    font-family= ; => 폰트 종류
    color= ; => 글씨 색깔


💦 가상 클래스


< hover > 란,

선택 요소에 마우스가 올라갔을 때 변화하는 코드

< active > 란,

선택요소를 마우스가 클릭했을 때 변화하는 코드

< focus > 란,

선택요소가 포커스되면 변화하는 코드



< before> 란,

선택 요소 앞에 내용을 입력하고 싶을 때 사용하는 코드

< after> 란,

선택 요소 뒤에 내용을 입력하고 싶을 때 사용하는 코드

before,after 모두 반드시 content 속성 사용!
   빈값("")이라도 넣어 주어야 적용됨!



css수업도 이렇게 흘러가고 있다.
열심히 따라가고있고 익혔던 것 몰랐던 것 전부 다 머리에 넣기위해 보고 또 보고 하고 있다.
아직은 수업의 난이도가 높지 않아 잘 따라가고 있다고 느끼지만,
수업의 난이도가 올라가면 잘 따라갈 수 있을까라는 걱정있긴하다.

하지만 그런 걱정을 안 하기 위해 수업을 듣는 것이므로
걱정 대신 기대를 해보기로 했다!=3

0개의 댓글