본문 바로가기
FastCampus/한 번에 끝내는 파이썬 웹 개발 초격차 패키지 Online.

한 번에 끝내는 파이썬 웹 개발 초격차 패키지 82일차

by Dream_World 2021. 11. 26.

웹 &  프론트엔드 기본

오늘은 일하면서 바쁘게 흘러갔던 것 같다. 오전에는 웹 진단했던 내용을 정리해서 결과보고서를 작성하고 수정사항과 함께 전달 느렸다. 이후에는 모바일 진단을 통해서 안 되는 부분을 하나씩 메꾸어 나갈 수 있었다. 에러에 대한 정보도 찾아보고 해결점을 찾다 보니 모바일 진단하면서도 재미를 느끼게 되었다. 2년 만에 접하다 보니 머릿속에 지우개가 있듯 어제는 시작부터 엄청나게 꼬였는데 하루 만에 그래도 한 단계씩 업그레이드하는 모습을 보게 된다. 내가 부족했던 부분들을 동기들에게 알려주면서 서로를 보완해주면서 뿌듯함을 느낄 수 있었다. 내 성격상 모든 것을 공유하고픈 마음이 컸기에 내가 작성했던 내용부터 에러를 보는 시각부터 알려주면서 같이 성장할 수 있었던 시간이었다. 비록 테스트 앱을 설치해서 진단했지만 많은 소스를 볼 수 있어서 큰 경험이 되었던 것 같다. 모바일 진단 항목이 다소 분리되어 헷갈리긴 했지만, 어느 부분을 진단해야 하는지 알 수 있었던 것 같다.

 


CSS

기본 문법

선택자 { 속성 : 값; }

선택자 : 스타일(CSS)을 적용할 대상 (Selector)

속성 : 스타일(CSS)의 종류 (Property)

값 : 스타일(CSS)의 값 (Value)

 

: = 속성은

; = 값이다

{ = 스타일 범위의 시작

} = 스타일 범위의 끝

 

한 줄로 입력시 가독성이 떨어지기 때문에 들여쓰기(Tab) 와 내어쓰기(Shift + Tab)를 사용해야 할 것이다.

 

/* = 주석 시작

*/ = 주석 끝

 

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
    <link rel="stylesheet" href="./main.css">
</head>
<body>
	<div>Hello World!</div>
</body>
</html>

 

main.css

div {
    color: red;
}

오늘은 간단하게 CSS 문법 개념에 대해서 학습해보는 시간을 가졌다. 선택자를 통해서 어떤 값을 부여할지 스타일을 꾸며준다고 생각하면 될 것이다. CSS 나오기 전에는 늘 딱딱한 정적인 웹 사이트로 링크가 덕지덕지 있었던 웹 사이트를 떠올릴 수 있다. 그게 더 추억이며 검색할 때도 그게 더 편했을지도 모르겠다. 시대가 변하였고 난 꼰대의 나이가 되었듯 CSS가 적응이 안 되긴 하는 세대이다. CSS를 통해서 시각적 효과는 주지만 너무 난무하면 조잡할 수밖에 없고 CSS 제대로 활용 못 하면 위치마저 틀어지기 때문에 많이 어려운 요소로 기억된다. CSS 적응을 어디까지 할지 궁금할 뿐이다.
82일 차는 여기서 마무리하고자 합니다.

 

패스트캠퍼스 링크 :https://bit.ly/37BpXi

 

패스트캠퍼스 [직장인 실무교육]

프로그래밍, 영상편집, UX/UI, 마케팅, 데이터 분석, 엑셀강의, The RED, 국비지원, 기업교육, 서비스 제공.

fastcampus.co.kr

댓글