학습내용

월말평가 (머신러닝, 파이썬), css 기초
github 소스코드: https://github.com/YesolLee421/DaeguAISchool2021/tree/main/EX_3

월말평가

cognitive service 종류

• OCR(Optical Character Recognition): 문자, 숫자를 학습을 통해 인식
• Computer Visiohn: 사진이나 동영상 등에서 필요한 요소들을 인식하고 분석
• Text Mining: 비/반정형 데이터에서 유용한 정보 추출, 가공(문서 요약, 특성 추출 등)
• Data Mining: DB에 저장된 자료 같이 정형화된 데이터에서 정보 추출, 가공하는 기술
• Face API: 얼굴 인식
  - 얼굴 감지: 이미지에서 얼굴과 특성을 인지
  • 사람 식별: 최대 1백만 명 데이터 기반으로 개인 찾기
  • 인지된 감정 인식: 다양한 표정, 감정 상태 인지
  • 비슷한 얼굴 인식 및 그룹화

CSS 기초

css 파일 연동

<link> 태그 안 href 속성값으로 css파일 경로 넣어주기

<link rel="stylesheet" type="text/css" href="style.css">

HTML 태그의 부모자식 관계

• 자식 태그는 부모 태그의 속성을 상속받는다.
• 하지만 부모 태그의 모든 속성을 상속하진 않는다.
• 자식 태그가 같은 속성의 다른 속성값을 가지고 있으면 자식의 속성값이 적용된다.

HTML 선택자

• css에서 특정 html요소에 접근하는 방식으로 총 4가지가 있다.
• 적용 우선순위: type(tag) < class < id < style attribute

선택자 1. tag

<header>
  <h1>hello World</h1>
</header>

header h1 { color: red; }

선택자 2. class

태그의 별명과 같은 것으로 하나의 태그가 여러 개의 클래스를 가질 수 있다. 한 문서 안에 동일 클래스 여러 개를 사용할 수 있다.

<header>
  <h1 class="test1">hello World</h1>
  <h2 class="test1 test2">welcome</h2>
</header>

.test1 { color: red; }
.test2 { background-color: pink;}

선택자 3. id

태그의 이름과 같은 것으로 하나의 태그가 하나의 id를 가질 수 있다. 한 문서 안에 하나의 id는 한 번만 쓸 수 있다. javascript 사용 시 id 이용 해 객체 지정할 때 중복 id가 있으면 가장 위 객체만 지정된다. id 이름값은 숫자로 시작할 수 없다.

<header>
  <h1 id="test1">hello World</h1>
  <h2 id="test2">welcome</h2>
</header>

#test1 { color: red; }
#test2 { background-color: pink;}

선택자 4. style attribute

태그 속성 중 하나로 style="" 안에 다시 css 속성과 값을 넣어줄 수 있다. 선택자들 중 가장 우선적으로 적용된다.

<header>
  <h1 style="color: gray;", id="test1">hello World</h1>
  <!-- style 속성이 id보다 우선하여 글자색이 회색으로 적용됨-->
</header>

.test1 { color: red; }

cascading(캐스캐이딩)

여러 선택자들이 중복될 경우 적용되는 우선순위를 나타낸다. 원본 코드를 유지하면서 새로운 css 속성을 적용하고 싶을 때 유리하다.

캐스캐이딩 규칙

1. 동일한 선택자: 나중에 적용된 속성
2. 선택자 우선순위: type(tag) < class < id < style attribute
3. 더 디테일하게 객체 적용할수록 우선적용

<header id="intro">
  <h1>header h1</h1>
  <div class="container">
    <h1>header h2</h1>
  </div>
</header>

/*가장 윗 줄이 가장 디테일하게 요소를 가리키고 있으므로 <div>안 <h1>요소의 글자색은 빨간색이 된다. */
#intro .container h1{ color:red;}
#intro .container { color:blue;}
#intro { color:yellow;}

영역 크기 및 채우기 관련 css 속성

• 넓이 조정값: width, height
• px = 고정값
• % = 변동값. 해당 태그의 부모 태그 크기를 기준으로 한다.
• 변동값 적용 시 min, max값을 같이 사용해 최소 크기, 최대 크기를 지정해준다.
• color: color name, 헥사코드, rgb(r,g,b)
• opacity: 투명도. 0 = 완전 투명, 1 = 원래 색
• border: 테두리 속성 (테두리 종류, 테두리 굵기, 테두리 색 등)
• border-radius: 테두리 가장자리 둥글게 조절

div {
    width: 100%;
    height: 300px;
    min-width: 100px;
    max-width: 800px;
    opacity: 0.5;
    border: 10px solid green;
    border-radius: 30px;
    background-color: pink;
} 

text 조절 관련 css 속성

• font-family: 여러 폰트 중 앞에서부터 사용가능한 폰트 적용
• sans-serif: 모든 브라우저에서 사용가능한 폰트. 항상 마지막 옵션으로 두기
• google font -> html <link>(css 시트 경로 위에), css font-family 가져와서 적용 가능
• text-decoration: underline, line-through
• text-align: 태그의 bg color 범위 안에서 정렬됨
• font-style: 글자 스타일 (기울임체 등)
• font-

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jomhuria&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">

h1 {
    color: indigo;
    font-size: 120px;
    font-style: italic;
    font-family: 'Jomhuria', sans-serif;
    font-weight: 500;
    text-decoration: underline;
    text-align: center;
    
    background-color: hotpink;
}

<ul> <ol> 리스트 스타일

• 리스트 태그는 각각 기본 스타일을 가지고 있다. 해당 스타일을 없애려면 list-style속성값으로 none을 준다.

ul {list-style: none;}

background 관련 css 속성

• background-image: image보다 큰 공간이면 반복해서 채움
• background-repeat: 이미지 반복 방식 제어
• background-position: 이미지 위치 제어

<div id="bg"></div>
<img src="icon.png" alt="코드 아이콘" width="100px" height="50px"> -->

#bg {
    width: 256px;
    height: 256px;
    background-color: yellowgreen;
    background-image: url(icon.png);
    background-repeat: no-repeat;
    background-position: left center;
}

css background와 html <img>의 차이

• html: 이미지 전체가 설정한 공간에 맞게 조절된다. alt속성값으로 이미지 정보를 적을 수 있기 때문에 웹 접근성을 고려해 로고 등 정보를 제공하는 이미지는 <img>태그를 사용한다.
• css: 액자틀처럼 공간 크기에 맞게 이미지 잘려서 보인다. 단순 장식용 이미지를 삽입할 때 사용한다.

어제 했던 html파일에 css 연습 적용

소스코드: https://github.com/YesolLee421/DaeguAISchool2021/tree/main/EX_2 ->naver.html, style-naver.css

어려웠던 내용

1. 하나의 id는 한 문서 안에 하나만 존재할 수 있다고 했는데, 실험삼아 같은 id를 여러 태그에 써 봤더니 css속성이 적용되긴 했다. id를 중복해서 썼을 때 더 생길 수 있는 문제는 어떤게 있을지?

해결방법

1. (팀즈 질의응답에 질문함) css에서는 속성값 다 적용되는것처럼 보이지만 javascript쓰기 시작하면 맨 위의 하나만 선택이 된다. 추후 오류를 피하기 위해, 또한 관습적으로 id는 유일값을 사용해야 한다.

소감

오늘 첫 월말평가를 치뤘다. 지난 2주 간 배운 파이썬과 머신러닝 관련 내용이었는데, 딱히 인터넷 검색을 하지 않아도 그렇게 어렵진 않았다. 덕분에 지난 2주간 배운 내용을 다시 한 번 돌아보게 되어 도움이 되었다.
어제 html 설계도면 작성의 경우 콘텐츠를 넣지 않으면 브라우저 상 변화가 잘 보이지 않았는데, css는 속성값이 변경될 때마다 바로바로 변화가 보여서 더 재밌었다. 강의가 길지 않아서 연습 삼아 어제 배운 html설계도에 css를 추가해 보았다. 아직 흔히 보는 웹사이트의 디자인과는 거리가 멀지만 언젠가 할 수 있게 되기를 바란다.