👥 조별 과제

⚡ 개념 정리하기 !

  1. 스타일 시트

    내부 스타일 시트 - HTML 코드 내부에 style 태그를 이용하여 CSS 삽입

    외부 스타일 시트 - .css 파일을 .html 파일과 연결하여 사용

    인라인 스타일 - 태그의 style 속성을 이용하여 CSS 코드 삽입

  2. 선택자 정리

    type : 타입 선택자. 각 타입에 해당하는 태그들을 모두 선택한다.

    * : 전체 선택자, 모든 태그를 선택한다.

    # : ID 선택자. 하나의 요소에 아이디를 부여 후 선택한다.

    . : 클래스 선택자. 클래스 요소에 아이디를 부여 후 선택한다.

    > : 자식 선택자. 바로 아래에 오는 자식 태그를 선택한다.

    `` : 자손 요소 선택자. 여러 단계를 걸쳐 자식 태그들을 선택한다.

    + : 인접선택자. 형제 중 바로 다음에 오는 태그 하나를 선택한다.

    ~ : 일반형제선택자. 형제 중 모든 태그를 선택한다.

    속성 선택자: element[attr="value"]{} 의 형태로 사용

    구조적 가상 요소 선택자

  3. 선언부

    스타일링 하고 싶은 속성과 값을 입력하는 영역

  4. 색 표현 방법

    키워드, RGB, Hex 세 가지 방법이 있음.

    키워드: 색상의 영문 이름을 색을 나타내는 키워드로 사용

    RGB: 0~255 사이 숫자를 작성하여 색상을 나타냄

    RGBA: rgba() 함수에서 alpha 값을 0~1로 작성하여 투명도 설정 가능

    Hex: #RRGGBB , 0~FF 사이의 숫자를 이용하여 색상을 나타냄.

  5. font-size 속성

    폰트의 크기를 조절하는 효과가 있음.

    숫자 뒤에 오는 단위가 5가지 이상으로 다양함.

    px - 기본이 되는 단위

    rem - 원래 크기 * 배율

    em - 부모 태그 * 배율

    vw - viewpoint width, 화면의 가로 크기와 관련 (1vw = 화면 가로 크기 / 100)

    vh - viewpoint height, 화면의 세로 크기와 관련 (1vh = 화면 세로 크기 / 100)

  6. 텍스트 관련 CSS 속성

    font-size : 텍스트의 크기 조절

    color : 텍스트 색상

    font-family : 텍스트 글꼴 지정

    font-weight : 텍스트 두께 지정

    line-height : 줄 간격 지정

  7. flexbox

    box와 item을 행 또는 열로 자유자재로 배치시켜줌.

    flexbox의 특징

    1. 컨테이너 박스에 적용되는 속성 값이 존재함 각각의 아이템에 적용되는 속성 값이 존재함
    2. 중심축과 반대축이 존재함. 축이 수평/수직이냐에 따라 바뀔 수 있음.

⚡ 토론해보아요 !

  1. <link> 태그의 활용 방안을 고민해보아요 !

    <link> 태그는 외부 리소스 파일을 연결하는 역할을 하며, .css 파일 뿐 아니라 아이콘 및 미디어 등 외부 라이브러리를 불러올 수 있다.

  2. 내/외부 스타일 시트와 스타일 속성 중 어떤 것을 자주 이용할 것 같나요?

    외부 스타일 시트 (모두의 의견)

    CSS 파일을 따로 만들고 스타일 관련된 코드를 따로 작성하는 것이 효율적임. 또한 실무에서도 이 방법을 가장 많이 쓰기 때문이다.

  3. CSS 게임을 하면서 많이 틀린 부분이 있다면 설명해보아요 !

    flexbox 개구리 게임에서 마지막 레벨을 클리어하기 어려웠다. 특히 중심축을 설정하고 방향을 정하는 것이 헷갈렸는데, column, wrap 속성에 각각 reverse 속성을 추가해보며 오랜 시간 끝에 문제를 풀 수 있었다.