https://weeklycodenews.netlify.app/

 

Weekly Code News

이번 호에서는 유닉스 명령어와 추천 시스템, 그리고 HTML 꿀팁을 전해드립니다.

weeklycodenews.netlify.app

HTML과 CSS로 간단한 사이트를 만들어보고 배포하는 방법에 대해서 배웠다.

기초지식이 살짝은 있는터라 코드를 작성하는게 어렵진 않았는데 배포 부분과 구글 애널리틱스를 활용하는 부분이 살짝 어려웠다.

'코린이 개념잡기 > HTML' 카테고리의 다른 글

시멘틱 태그(sementic tag)의 장점  (1) 2024.12.06
HTML 속성 class, id  (1) 2023.03.12
라벨링  (0) 2023.03.12
<form> : 서식  (0) 2023.03.12
<table> : 테이블(표, 항목)  (1) 2023.03.12

오늘 포스팅은 코드잇스프린트 자바스크립트 프리코스 완주 챌린지에 대한 후기를 적어보겠습니다!

최근에 프론트엔드 부트캠프에 참여하게 되었고, 그 전에 자바스크립트에 대한 기초적인 지식을 쌓기 위해 코드잇 스프린트의 프리코스를 수강했답니다.

프리코스는 자바스크립트의 기초부터 시작해서 변수, 함수, 배열, 객체 등 다양한 개념을 다루고 있는데 초보자(나같은 비전공자도!)도 쉽게 따라갈 수 있어서 좋았습니다. 강의는 영상으로 진행되는데 짧고 간결하게 구성되어 있어 집중하기 좋았고 각 강의마다 퀴즈나 과제가 있어 학습효과가 높았습니다. 그리고 특히 강의를 들으며 코드를 직접 작성해보는 것이 가장 유익하다고 느꼈습니다. 이론적으로만 배우는 것이 아니라, 실제로 코드를 짜보는 과정에서 많은 것을 배울 수 있었습니다.


저는 이 프리코스를 통해 자바스크립트의 기초를 확실히 다질 수 있었습니다. 처음에는 간단한 문법을 배우는 것이었지만, 점차 복잡한 개념으로 넘어가면서 도전의 연속이었습니다. 특히, 핵심개념부터는 과제가 조금 어려워져서 당황하기도 했습니다. 하지만, 강의를 여러 번 반복해서 듣고, 모르는 부분은 구글링을 통해 해결하면서 점점 자신감을 얻었습니다.

프리코스를 완주한 후에는 자바스크립트에 대한 이해도가 높아졌고, 부트캠프에서도 더 깊이 있는 학습을 할 수 있었습니다. 이 과정에서 느낀 점은, 혼자서 공부하는 것보다 체계적인 커리큘럼이 얼마나 중요한지를 깨달았습니다.

'일상 > 사념' 카테고리의 다른 글

24년 11월 29일  (1) 2024.11.29

웹 사이트에 접속할 때 다양한 디바이스를 통해 접속을 할 수 있다. (휴대폰, 태블릿, 데스크탑, 노트북, 스마트 워치 등)

각 디바이스마다 화면의 크기가 다른데 이렇게 다양한 크기를 가진 모든 디바이스를 모두 같은 UI로 웹사이트를 표현한다면 굉장히 비효율적일 것이다. 

그래서 반응형 웹 디자인은 사이트에 접근하는 기기의 해상도에 따라 서로 다른 스타일을 적용해 주어야 하는데 CSS의 미디어 쿼리를 이용해 각 디바이스의 크기에 맞는 최적의 UI들을 따로 설정 해 줄 수 있다. (다양한 화면 사이즈에서도 똑같은 유저 경험을 제공해야하기 때문에 중요)

@media [only | not] 미디어 유형 [and 조건] * [and 조건]

기본 설정 해둔 미디어쿼리 예시 html과 scss

 

브라우저에서 보이는 화면

@media (max-width : 600px) {
// 화면 너비가 600px 이하인 경우에만 적용되는 스타일 
	.cellphone{
    	color : red;
    }
}

@media (min-width : 600px) and (max-width : 992px) {
// 화면 너비가 600px 이상, 992px 이하인 경우에만 적용되는 스타일 
	.cellphone{
    	color : red;
    }
}

 

미디어 쿼리 css 적용
브라우저창에서의 결과
미디어 쿼리 다른 설정 방법
뷰포트가 가로사이즈가 길 때와 세로사이즈가 더 길 때의 브라우저 결과 창
프린트 하는 경우의 미디어 쿼리
기존 화면 > 인쇄를 눌렀을 경우 > 인쇄창에서 보이는 미디어쿼리 적용된 모습

변경하는 기준점을 모르겠을 땐 구글링으로 검색해 보는 방법도 있다.

media query break points

 

'코린이 개념잡기 > CSS' 카테고리의 다른 글

전체 선택자  (0) 2024.11.29
마진 상쇄(margin collapsing)  (2) 2024.11.29
inset과 gap  (0) 2023.03.17
flex 2  (0) 2023.03.16
Flex  (0) 2023.03.15

+ Recent posts