오늘 학습 내용
1. HTML과 CSS를 사용하여 웹페이지 Twittler 를 만들어 보았다. 아래는 오늘 만든 웹페이지이다.
CSS가 무엇인지는 배웠지만 사용법에 대한 학습이 부족해 사용을 못하였다.
구글 검색을 통해 적용하는 방법을 알아보니 CSS를 적용하는 방식에는 총 3가지가 있었다.
1) 외부 스타일 시트(External Style Sheet) 방식
2) 내부 스타일 시트(Internal Style Sheet) 방식
3) HTML태그내에 스타일 적용(Inline Styles) 방식
나는 이중 내부 스타일 시트 방식을 사용하였는데 방법은 아래처럼 head 부분에 <style> "CSS 내용" </style> 이런식으로
원하는 id 나 class에 삽입하면 된다.
<head>
<meta charset="UTF-8">
<style>
#twittler {color:white;background-color: #a1c0e0;text-align: center;border: 5px solid #578fc7;margin-bottom: 20px;}
#write {background-color: #578fc7;color:black;font-weight: bold;margin-bottom: 20px;}
.userName {margin-left: 30px;}
.button1 {text-align: center;padding: 10px 20px;font-size: 20px;font-weight: bold;margin: 5px 0px 10px;}
</style>
</head>id는 #XXXXX 처럼 맨앞에 #을 붙이면 되고, class는 .XXXXX 처럼 앞에 .을 붙여주기만 하면 된다.
2. DOM(Document Object Model)에 대하여 학습하였다.
DOM을 사용하여 자바스크립트에서 만들었던 기능을 사용 할 수 있다고 한다.
하지만 짧은 학습시간과 처음 듣는 내용에 아직 이해를 하지 못하였다. 내일 조금 더 복습하여 익히도록 하겠다.
DOM을 사용하여 위에 만든 웹페이지 틀에 다양한 기능들을 만들 수 있다고 하니, 얼른 배워서 저 버튼이나 글을 구현해 보고싶다.
'TIL (Today I learn)' 카테고리의 다른 글
| 7월 20일 (월)_Immersive OT, Node.js (0) | 2020.07.20 |
|---|---|
| 7월 9일 (목)_재귀(Recursion) (1) | 2020.07.09 |
| 7월 6일 (월)_Underscore.js, 비동기처리 & Callback (0) | 2020.07.06 |
| 7월 2일 (목) (1) | 2020.07.02 |
| 6월 30일 (화)_HTML & CSS, 프로필 (0) | 2020.06.30 |