스파르타코딩 왕초보 시작반 1주차 내용(1-1 ~ 1-11)

간단한 내용정리

1-2 통합개발도구

코드를 작성하는데 좀 더 편리한 기능을 제공하는 도구

1-3 HTML, CSS의 정의

1) HTML: 웹의 뼈대를 이룬다. tag를 이용하여 구성한다. 예시로는 div 태그가 있다 <div></div>
2)CSS: HTML을 이쁘게 꾸며준다. HTML 태그나 id, class를 이용하여 지정한 부분을 꾸며준다.

1-4 Bootstrap이란?

CSS를 좀 더 편하게 다룰 수 있도록 해주는 라이브러리이다.

컴포넌트를 이용해서 다음과 같은 페이지를 손 쉽게 만들 수 있었다.

하지만 만들고 나서 Bootstrap 없이 만들 수 있는지 궁금해져서 도전해 보았다.

1-11 CSS로 반응형 나홀로 링크 메모장 만들기

반응형이란 웹페이지 뿐 아니라 여러가지 크기의 기기에서도 적용될 수 있게 만드는 작업을 의미한다.

반응형을 만들기 위해 필요한 작업
1)Flex : Flex 아이템들은 가로 방향으로 배치되고, 자신이 가진 내용물의 width 만큼만 차지하게 된다. 마치 inline 요소들 처럼. height는 컨테이너의 높이만큼 늘어난다. Flex 상태의 아이템을 여러 기능을 통해 조작할 수 있다.


같은 div이지만(block 속성) flex를 적용함으로서 저런 모양이 되었다.

2)@media : 화면이 특정 크기일 때의 CSS를 설정할 수 있다. 기본형을 웹으로 잡고 모바일 화면에 해당하는 크기일 때 Flex 요소들을 다시 설정한다.

@media (min-width: 1024px) {
    .card-item {
        width: 33.3333%
    }
}

다음 CSS는 최소 너비가 1024px, 즉 1024px 보다 커지면 card-item 클래스를 가지고 있는 요소를 조정한다는 뜻이다.

이 요소들을 가지고 만든 결과는 다음과 같다.

웹 크기 (1024px 이상)

모바일크기 (600px 이하)

참고: 1분코딩 이번에야말로 CSS Flex를 익혀보자(https://studiomeal.com/archives/197)

느낀점: 간단한 반응형 페이지를 만드는데도 신경 쓸 부분이 많다는 것을 알 수 있었다. 부트스트랩을 사용하면 확실히 만드는 데 시간을 줄일 수 있는 장점이 있고 CSS만을 사용하면 자유로운 작업과 세세한 작업이 가능한 장점이 있다는 것을 알 수 있었다.