📌수업 내용
이고잉강사님의 <코딩, 웹, 인터넷> 수업 두 번째 시간을 들었다.
- html복습
→ html은 정보다 - css
→ css는 디자인이다 - css 사용 방법 (1) 스타일 속성 값 사용
→ 1억 줄 코드를 수정한다고 생각하면 매우 비효율적
<h1 style="color:blue; text-decoration: underline;">이상한 변호사 우영우</h1>- css 사용 방법 (2) 스타일 태그 사용
→ <head>태그 안에서 사용
→ <style>태그 안에서 li{color:blue; font-size:12px;}로 작성하면 되는데
li는 셀렉터(selector), 중괄호 안에 있는 것을 선언 블록(Declaration block), color:blue;를 선언(Declaration)이라는 의
→ '셀럭터'에는 바꾸고 싶은 걸 태그 선택자를 작성하면 되고 '선언'에는 값은 어떻게 바꿀지 적어주면 된다.
→ class는 group을 의미, 몇 가지만 선택해서 바꾸고 싶으면 그룹을 지정해주면 된다. 그룹을 지정한 뒤 스타일 태그의 셀렉터에 적어주면 되는데, 그냥 적으면 웹페이지 전체 중에 클래스 이름이 grupup1인 모든 것을 바꿔주는 거고 앞에 .을 찍어줘야 한다.
→ 특정 한 개에 대해 수정하고 싶으면 식별자를 지정해주면 된다. 식별자는 절대 중복되면 안 된다. 똑같은 속성을 가진 게 id다. id선택자 앞에는 #이 와야 한다. id1은 식별자 #id1은 문법적으로 선택 자이다.
<html>
<head>
<title>2022 최고 드라마</title>
<style>
li{
color: blueviolet;
}
.group1{
color: coral;
}
#id1{
color: blue;
}
</style>
</head>
<body>
<h1 style="color:blue; text-decoration: underline;">이상한 변호사 우영우</h1>
<ul>
<li id="id1" class="group1">우영우</li>
<li class="group1">이준호</li>
<li class="group1">정명석</li>
<li>동그라미</li>
<li>최수연</li>
<li>권민우</li>
</ul>
</body>
</html>- li는 태그 선택자, group1은 클래스 선택자, id1은 식별자 선택자, 태그 선택자, 클래스 선택자, 식별자 선택자 순으로 더 포괄적이다. 우선순위는 반대다. 그래서 이준호와 정명석은 li태그지만 goup1으로 지정되어 있어 코랄색이 되고, 우영우는 li태그이고, group1으로 지정되어 있지만, 식별자 id1으로 지정되어 있어 파란색이 된다.
- css로 폰트 설정 방법
→ 구글 폰트 에서 @import 해주고 폰트 사용해주면 된다. - css의 box모델
→ 태그들의 시각적인 부피감을 결정하는 중요한 요소
→ 테두리를 만들기 위해선 스타일 태그 안에, border : 두께 색상 모양 3개를 적어주면 된다.
→ 추가 옵션으로는 크기 조절 (width, height), 글자 간격(padding), 테두리와 테두리 사이 간격(margin)등이 있다. - javascript
→java와 javaascript는 인도와 인도네시아로 전혀 다른 거다. 용어 정확히 쓰는 거 중요하다
→javascript는 사용자와의 상호작용이다
→콘솔, 터미널, 대화형 모드(인터랙티브 모드) : 자바스크립트로만 대화할 수 있는 카톡이다. 상호작용하는 거다
→html에서 1+1은 1+1인데 자바스크립트에서는 1+1은 2로 보여줄 수 있다.
→이벤트 프로그래밍 : 사건이 일어났을 때 (버튼을 클릭할 때) 원하는 javascript코드가 실행되도록 코딩하는 것
→사용 방법 (1) 크롬 개발자 도구의 콘솔 탭 (2) script태그 (3) 이벤트 (onclick 등)
→https://github.com/hoinnovation/drama_wuyoungwu
💡보고 느낀 것
- 코딩할 때, 일상 속의 작은 문제를 한다고 생각하기. 나의 무기 중 작은 것을 하나 배운다고 생각하면 된다. 주변에서 코딩으로 해결할 수 있는 문제를 찾아봐라, 콘솔(자바스크립트 실행창) 창 켜서 해봐라. 그런 경험을 뇌에 노출해야 네이티브가 될 수 있다.
- 수업받을 때 장기 기억으로 가져갈 것인지, 단기 기억으로 하고 넘어갈지 판단하는 게 중요하다. (html은 장기기억, css, 자바는 단기 뭐인지만 하고 넘어가면 된다)
- 혼자 실습해보면서 요즘 빠진 드라마인 이상한 변호사 우영우 소개 페이지를 만들어봤다. 실습 용이어서 배운 함수를 다 써보자는 용도로 만들어본건데, 이렇게 일상속의 관심분야를 해보니 정말 재밌었다.
2022 최고 드라마
hoinnovation.github.io
😄감사한 일
- 오늘 수업도 재밌었다. 최종 프로젝트에서 데이터 분석 결과를 확인할 수 있는 웹페이지를 만들게 되는데 기대된다.
- 무언가를 해내야 할 때, 검색을 사용해서 해내면 된다. 내가 만난 문제나 내가 하고 싶은 것들을 해결할 수 있는 방법이 구글 신에는 무궁무진하다!
✨적용할 것
- 하루에 한 번씩 오늘 배운 거 재밌게 해 보기 (5분도 안 걸림)
'👍 회고 기록 > 😎 업무 회고' 카테고리의 다른 글
| [220728] 다양한 DBMS에서 데이터 가공하는 방법을 배우다 (3) | 2022.07.28 |
|---|---|
| [220727] SQL은 도착지로 가는 방법이 엄청 많다! (0) | 2022.07.27 |
| [220725] 실험 설계 해보기 ("애플이 앞으로도 잘 나갈까?" vs "지금 아이폰을 쓰는 사람은 휴대폰을 바꿀 때도 아이폰을 쓸까?") (0) | 2022.07.25 |
| [220723] 파이썬 톺아보기 (0) | 2022.07.23 |
| [220721] 블로그에 쓸게 많구만! (0) | 2022.07.21 |
