어제 새벽 3시까지 코딩을 진행하며, 잠은 거의 4시간 정도? 잔 것 같다.
일단 이번 포스팅은 나의 개발 관점과 무엇을 놓치고 있었는지에 대해서 포스팅할 것 같다.
내가 왜 이렇게 늦게까지 하고 잠을 줄였냐고? 음... 그건 사실 생각해 보면 재미가 있기 때문이지 않을까?
무언가 배우려는 열정과 이 분야를 잘해지고 싶다는 욕망이 생긴다는 것이 어떻게 보면 재미라고 볼 수 있지 않을까 싶다.
미래에 내가 다시 포스팅을 쓱 읽어보면 아! 나는 이때 이렇게 생각했고 이렇게 접근했고 나를 알 수 있을 것 같아서 적어 놓는 것이 중요할 것 같다.
일단 개발에 대한 나의 생각은 기본적인 내용들은 모두 짚어보면서 나아가고 싶다는 것이다.
코드를 작성할 때 한 줄이라도 더 짧게 줄여보려고 노력하고, class의 이름을 다시 한번 더 깊게 생각해 보고 나중에 다시 class의 변수명을 바꾸는 것이 어찌 보면 조금이라도 디테일함이 습관화되어 있는 개발자가 되고 싶어서 그럴 것이다.
그리고 이렇게 아무도 관심 없는 개인 블로그에 포스팅을 하는 것 또한 공부한 것에 대한 기록과 개발자로서의 생각의 변함 그리고 부딪히는 난관들을 난 어떻게 헤쳐나갔는지를 적나라하게 볼 수 있기 때문이고 나아가서 나중에 많은 사람들과 넓은 네트워킹을 통해서 많이 이야기하고 내 코드를 가지고 충분히 비난하며 발전하고 싶다는 생각이 있다.
이제 본론으로 돌아와서 HTML을 시작으로 현재 "나는 이런 개발자입니다"를 보여주는 간단한 웹사이트를 제작 중에 있다.
CSS를 사용하며 대체 CSS는 누가 만들었고, CSS의 역사는 어떻고... CSS의 함수(?)에는 무엇들이 있는지 문득 궁금해졌고 이를 정리해야겠다고 생각했다.
사실 모든 CSS 함수를 다룬 포스팅을 찾아보려고 했으나 공식문서를 제외하곤 찾아보기 힘들어서 시간도 많은 내가 나를 위해 도전해 봐야겠다고 생각했다.
CSS의 개요 / CSS의 역사
CSS의 C는 Cascading이라는 녀석인데 Cascading이 뭔데? "폭포수처럼 흐르다"라는 의미이며, 연속적이고 단계적인현상을 설명할 때 사용된다고 한다. (폭포수모델 같은 건가?)
참고로 HTML과 CSS가 합쳐져서 우린 마크업언어라고 부르기로 했다.
여기서 짚고 넘어가야 할 핵심은 "프로그래밍 언어"는아니라는것이다. "스타일링 언어"라는 영역인 데 "선언적 언어"라고도한다.
CSS는 최초 CERN(유럽 입자물리 연구소)에서 나왔다.
("어라? HTML도 거기서 팀 바리스타인가 뭔가가 만들지 않았어?)
맞다. CERN은 아무래도 문서를 쉽게 공유하고 표현하는 기술이 매우 매우 필요했다는 것을 알 수 있다.(아마도 1분이라도 빨리 퇴근을 하기 위함이겠지)
HTML은 팀 버너스리가 1989~1991년에 주도적으로 개발을 했다면 CSS는 하콘 비움 리가 1994년에 개념을 제안하며 개발을 시작했다.
이때, 재미있는 일화가 한 개 존재하는데 당시에 웹 브라우저들은 CSS 지원을 거의 안 했고, 이에 연구자들이 "돌아가지도 않는 css 써서 뭐 하냐 아무도 안 쓸 거다."라고 비난 섞인 조롱을 듣기도 했다는 일화가 존재한다.(역시 역사는 똥에서 나오는 건가?)
공부를 하다 보니 재미있는 사실을 발견했는데 http://info.cern.ch/ 이 웹사이트는 팀 버너스 리가 최초로 제작한 웹사이트라고 한다.
현대의 절대 백과사전[나무위키]을 찾아보니 CSS는 완벽하게 습득한 상태라고 할지라도 그 용법이 나 문법에 상이한 차이가 있어서 매우 많은 실전경험이 필요하다고 한다.(그러니 못한다고 기죽지 말자 가장 기본의 언어인데 가장 어렵다.)
(나무위키를 보면서 느끼는 생각이지만 참... 이건 우리 집주소도 나올 것 같다 ㅋㅋ)
CSS를 시작해 보자!
CSS를 시작하기 앞서 HTML의 Head부분에 link를 해주어야 한다.
<link rel="stylesheet" href="styles.css" />
1. 요소 선택자(Element Selector)
- 요소 선택자
h1 { color: red; }
p { color: green; }
이렇게 h1, p를 각각 하나씩 선택할 수 있다.
- 여러 요소 동시에 적용
p, li { color: green; }
물론! p와 li를 모두 적용하고 싶으시다면 그것도 가능하다
2. 목록의 점 없애기
li {list-style-type: none;}
3. class 선택
<li class="special">항목 둘</li>
HTML에서 class를 주어서 css에서의 관리가 편해진다!- HTML -
.special {
color: orange;
font-weight: bold;}
special 클래스의 객체의 색을 orange로 폰트를 굵음으로 바꾸자- CSS -
4. 요소 + class 조합
li.special {
color: orange;}
이 경우에는 special안에 li에만 적용시키자
5. 위치 기반 선택자
- 자손 선택자
li em {
color: rebeccapurple;
} li안의 em에만 적용하자
- 인접 형태 선택
h1 + p {
font-size: 200%;
}h1 다음에 오는 p는 폰트를 2배로 늘릴거야!
6. 상태 선택
a:link { color: pink; }
a:visited { color: green; }
a:hover { text-decoration: none; } <- 참고로 이 녀석은 마우스를 갖다 댔을때 뜨는 밑줄을 제거하는거
명확하게 하자면 underline, overline, line-through 등등이 제거되는거지만 쉽게 생각하자!
상태 예
- :link (방문 전)
- :visited (방문 후)
- :hover (마우스 올림)
- :active (클릭 중)
- :focus (키보드 포커스)
7. 선택자 여러 개 결합 가능
article p span { ... }
h1 + ul + p { ... }
body h1 + p .special {
color: yellow;
background: black;
padding: 5px;
}이건 그냥 여러개 요소의 조합이 이렇게 가능하다 라는 예시입니다.CSS 구조
1. 외부 스타일 시트
<link rel="stylesheet" href="styles.css" />
link를 통해서 외부에 존재하는styles.css 파일을 불러오는 것
2. 내부 스타일 시트
<style>
h1 { color: blue; }
p { color: red; }
</style>
HTML <head>안에 <style>태를 이용하여 CSS작성을 진행 할 수 있다.
3. 인라인 스타일
<p style="color:red;">Hello World</p>
HTML의 본문에서 직접 style 속성을 사용하는 경우
외부, 내부, 인라인 중에 내가 추천하는 방식은 당연히 외부 스타일 시트이다.
그 이유는 본문인 HTML에 <style> 태그를 통해 선언을 한다면 나중에 코드가 길어졌을 때 유지보수 하기도 힘들뿐더러 코드의 가독성이 매우 저하되기 때문이다..
일단 나는 깔끔충이기에 코드 두 줄짜리를 한 줄로 바꿀 수 있다면 그렇게 하는 편이고 내 코드를 다른 사람(협업에서 비개발직군)이 보았을 때 "읽기 편하다!"라는 생각이 들어야 함께 목표를 이뤄낼 때 도움이 되지 않을까? (이건 그냥 내 성격이다. 개발자가 함께 일하는 사람을 배려해야 한다면 최선의 방식이 이 행동이지 않을까 생각한다.)
속성 (약 500여 가지)
(내용이 너무 많이 GPT를 긁어왔다.)
1. 레이아웃(Layout) 관련 속성
|
솔직히 모두 다 외울 순 없다. 하지만 계속 개발을 진행하면서 해당 속성들을 사용해 보고 눈에 익히도록 하자!
해당 속성들이 기본값이고, 이를 응용해서 사용하는 경우가 태반이다.
'Front-End > HTML' 카테고리의 다른 글
| HTML/CSS - <header> (0) | 2025.11.25 |
|---|---|
| [CSS] Scroll-Snap (0) | 2025.11.23 |
| CSS와 로그인 페이지 UI 제작과정 (0) | 2025.11.22 |
| HTML의 기본구조 및 Semantic 구조란? (0) | 2025.11.21 |
| 회원가입 화면 구현 (0) | 2025.11.21 |