대구AI스쿨 개발일지(3일차)

대구 ai스쿨 3일차 수업을 시작했다. HTML을 꾸며주는 디자인적 요소를
다루는 CSS에대한 교육이 시작되었다.

1) 학습한 내용

• CSS를 HTML에 적용하는 방법

CSS를 html에 적용하는데에는 크게 3가지 방법이 있다.

1. html "head"내에서 style 태그단락을 만들어 적용하는방법
2. html 태그마다 그 css값을 주는 방법
3. css파일을 따로 만들어 html링크를 이용해 다른파일에서 적용하는방법


• 부모자식관계

html에는 각기 다른 태그들이 점차적으로 포함되어 있는데, 포함하고있는 것을 부모, 포함되어있는것을 자식으로 정의해 사용한다.

부모자식관계로 이뤄지는 html구조는 부모태그의 속성은 자식태그에게 영향을 미친다 이다.

이것은 유전자에 비유되기도 하는데 부모에게 상속받은 유전자도 자신에게 적용되지만, 내가 직접가지고 있는 유전자가 더 가깝고 친숙하다.

또한 부모가 갖고있는 유전자를 모든자식이 상속하는것은 아니다. 예를 들어, a태그는 태생적으로 파란색을 가지는 유전자를 유지한다. 이러한 부모태그의 영향을 받지않는 것들도 존재한다.

다른부모태그의 자식태그의 이름이 같을때 부모태그와 자식태그를 같이 명시함으로써 구분되게 적용할 수 있다.

<예시>

header (부모) h1 (자식) { color:blue }
header (부모) p (자식) { color:pink }


• 선택자

같은 태그지만 다른 효과를 주고싶은 경우에는 어떻게해야할까?
이럴때 사용하는것이 선택자, 즉 특정영역에 접근하는 방법이다.

선택자는 크게 4가지로 분류된다.

1. Type

type 선택자는 h1과 같은 태그를 그대로 css에 적용해 사용하는 방법이다.
이방법은 같은 태그에 다른 값을 설정하기에 복잡하다는 단점이 있다.

2. ID

id 선택자는 #id라는 방법으로 그 값을 사용하는데 우리가 가진 이름으로
비유 할 수 있다. 이름을 여러가지를 가질 수 없듯이 id선택자는 단 하나의 태그의 속성값으로만 사용 할 수 있다.

3. Class

class 선택자는 .class라는 방법으로 사용되는데 id는 이름으로 비유한다면
class는 별명으로 비유할 수 있다. 우리가 이름은 하나만 가질 수 있어도 별명은 여러가지를 가질 수 있듯이 class선택자는 여러가지의 설정값을 가질 수 있다.

4.attibute

input[type = "text"]{border:solid 10px red;}
input[type = "password"]{border:solid 10px blue;}

이처럼 타입을 다르게 설정해 다른 값을 선택해 설정할 수 있다.


• CSS의 우선순위

나중에 작성된 코드의 우선순위가 더 높다.
이런걸 우리는 Cascading은이라고 한다.

type선택자 보다 class선택자의 우선순위가 더 높기에 순서에 상관없이 항상 class선택자가 type선택자보다 우선적으로 실행된다.

마찬가지로 class선택자보다 id선택자가 우선순위가 높기에 더 먼저 실행된다.

또한 html내에서 직접적으로 적는 style 속성안에서 css값을 부여하는것이 id보다 우선순위가 높다.

이렇게 차례대로 우선순위가 정해진것을 Cascading(계단)이라고 하며, 예외가 있다면 동일선상의 코드안에서 디테일하게 작성할수록 우선순위가 높아진다.

결과적으로 Cascading은 원본코드를 유지한상태에서 새로운 css를 덮어씌워 추가하는 방식으로 진행하고 싶을때 사용하는것이 적합하다.


• CSS의 여러 속성

1. 공간의 크기를 가변값을 바탕으로 잡히게 하는것은 "%"를 사용한다. (div{width:100%} 를 사용하면 부모태그를 기준으로 100%의 공간을 차지하게 된다.

2. 테두리 선의종류 선의크기 선의색깔 - (border:solid 10px red;)

3. 모서리에 라운드를 적용 - ( border-radius:30px;)

4. 폰트사용방법 (font-family: Arial, Times, sans-serif;)
font-family는 여러가지를 입력해도 점차적으로 사용해 적용한다.

5. 폰트 굵기, 투명도( font-weight(굵기), opacity:0~1사이로 설정)


• 백그라운드 속성

백그라운드는 말그대로 배경인데 백그라운드에 이미지를 설정했을때
공간의 크기가 사진보다 크면 반복효과를 통해서 가득채운다.

백그라운드 이미지와 img 이미지의 차이점은
img 이미지는 크기가 온전치 않아도 모양을 온전히 유지하는반면
백그라운드 이미지는 배경모양에 따라 이미지도 짤리거나 변동이 있다.

어떠한 정보를 담고있어 사용해야한다면 Img
데코레이션 용도로 사용한다면 백그라운드이미지를 사용한다.

2) 학습내용 중 어려웠던 점

CSS의 우선순위부분에 html기초공사의 중요성을 깨달았다.

어렵다기보다 꼼꼼하게 생각하고 넘어가야 나중에 헷갈리지 않겠다고 생각했다.

3) 해결방법

수업에서 강사님께서 하시는 말씀들을 듣고 이해가안되면 계속 돌려보았다. 구글링과 더불어 조금이라도 헷갈리거나 오류가 나오면 각기 다른방법으로 해결해 보려고 노력했다.

4) 학습소감

css의 사용이 시작되면서 점점 내가 만들고 싶었던 웹페이지를 만든다는게 다가왔고 실무에선 훨씬 심화되어 사용되는 기초코드들을 좀 더 확실하게 학습하고자 생각했다.

오늘 내가 작성한 css 수업내용이다.