📋 TO-DO LIST
- 신입 연수원 활동 [o]
- 1일차 강의 [o]
📍 학습 내용 정리
-
컴퓨터적 사고 -> 프로그래밍 언어 (컴파일러: 번역) -> 컴퓨터
(알고리즘) -
컴파일러: 컴퓨터가 이해할 수 있는 기계어로 번역해주는 역할(파일 전체를 번역)
-
프로그래밍 언어: 컴퓨터와의 소통을 위한 언어
ex) Java , python 등
1. 프론트엔드
- 프론트엔드 개발자의 역할
- 웹이나 어플리케이션에서 디자인 구현
- 사용자 편의 최적화를 위해 웹/앱의 성능을 개선
- 백엔드와의 협업 등
2. HTML
- html은 페이지를 구성하는 마크업 언어이다
html은 말그대로 마크업언어이기 때문에 프로그래밍언어는 아니다.
3. CSS
-
색상,크기, 폰트 등 시각적인 표현을 할 때 사용한다
-
inline: 태그 안에 바로 css를 넣어주는 방법
-
internal: head태그 안에 css를 주는 방법
-
external: 파일을 따로 생성하여 css를 주는 방법
현업에서는 주로 external방식을 쓴다
우선순위:
Inline > Internal > External
Inline - html 요소 내부에 style 속성을 사용해
css 스타일을 적용하는 방법이다.
해당 요소에만 적용할 수 있다.
css 꼬일 수 있으니 가급적 사용 지양
<body>
<h1 style="color : red; text-decoration : underline;" >제목</h1>
</body>
Internal - html 문서 내의 head 태그에 style 태그를 사용하여 css 스타일을 적용한다.
해당 html문서에만 적용할 수 있다.
<style>
h1{
color : red;
text-decoration : underline;
}
</style>
External - 외부에 작성된 css 파일을 연결시켜 css 스타일을 적용하는 방법이다.
html <head>내부에 <link>태그를 사용해 적용.
해당 html문서에만 적용할 수 있는것이 아닌 연결만 한다면
다른 html 문서에도 스타일 적용이 가능하다.
<link rel="stylesheet" href="./style.css">
<!-- style.css -->
h1{
color : red;
text-decoration: underline;
}📍 일일보고
- 부족한 점 : 공식문서를 확인하는 습관을 들여야 할것 같다.
- 스스로 시도해본 것들 : button 태그가 아닌 input type="button"을 사용해봤는데 현재는 input type="button" 사용을 지양하는 이유를 알게됐다.
- 해결 내용 :
<button>
<img src = "https://example.com/example.png" alt="example">
</button>button 태그를 사용하면 하위태그를 지정할 수 있다.
input type="button"은 스스로 닫는 태그이기에 하위태그 지정불가
- 알게된 점 : css 스타일 적용에 우선순위에 대해 알게되서 css 꼬이는 문제에 대해서 해결방법을 찾았다.
- 헷갈리거나 실수한 점 : css 우선순위에 대해 몰랐을때
회고 : 1일차를 진행했는데 아직은 배워야할것도 많고 지치지 않고 끝까지 완주할 수 있도록 꾸준히 해야겠다.
🤦♂️