[Front] 공부일지 - 1

11879 단어 CSSCSS

서론

사실 처음에는 프론트에 별 관심이 없었다. 프론트가 재밌어 보이지도 않았고, 별로 배워야 할 이유도 느끼지 못해왔다. 그래서 지금껏 백엔드만 공부해왔고, 백엔드만 개발해왔다.

이러던 와중에 갑자기 프론트를 공부하려고 하는 이유는 협업 때문이다.

최근에 하나의 팀 프로젝트를 진행했었는데 커뮤니케이션이 쉽지 않았다. 우리 팀의 경우에는 백엔드는 백엔드만 알고 프론트는 프론트만 알았다. 그리고 팀원 대부분은 팀 프로젝트 경험이 적거나 없었기에 서로를 이해하기 어려웠다.

그래서 나는 프론트를 공부해보기로 결심했다. 그래야 그들을 더 이해해 같이 좋은 방향으로 결과물을 만들어낼 수 있을거라 믿기 때문이다.

CSS

Cascading Style Sheet

노드를 공부하기 전에 JS는 제대로 공부했었는데, HTML과 CSS는 굳이 공부할 필요성을 느끼지 못해서 공부를 하지 않았었다.

HTML은 그래도 기초정도는 공부를 하고 넘어갔었는데 CSS는 정말 하기 싫었던 것 같다. 그래서 아직도 난 CSS를 못 짠다.

CSS Selector

선택자(Selector)는 특정 요소를 선택하는 기능을 한다. 선택한 요소에 CSS 속성을 부여할 수 있다.

선택자를 사용하지 않고 글씨에 색상을 지정할 때에는 다음과 같이 했다.

<a><font color="red">hi</font></a>
<a style="color: red;">hi</a>

위는 Deprecated된 HTML의 <font> 태그이고, 아래는 CSS 속성을 직접적으로 부여한 것이다.

선택자를 사용한 예시는 다음과 같다.

<head>
  <style>
    a {
      color: red;
    }
  </style>
</head>
<body>
  <a>hi</a>
</body>

선택자는 <style> 태그에서 작성된다. 또는 .css 파일에서 작성될 수 있다.

.css 파일 불러오기

.css 파일을 불러오는 방법은 크게 두 가지가 있다. <link> 태그를 사용하는 방법과 @import가 있다.

/* style.css */

a {
	color: red;
}
<!-- main.html -->
<body>
  <a>hi</a>
</body>

위와 같은 .css 파일과 body가 있을 때, 아래와 같이 차이가 난다.

<link> 속성을 사용하는 경우에는 아래와 같다.

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

가장 일반적인 방법이고, 가장 성능이 좋은 방법이라고 한다.

@import 구문을 사용하는 경우에는 아래와 같다.

<head>
  <style>
    @import url('css/style.css');
  </style>
</head>

@import 구문은 CSS의 문법이기 때문에 <style> 태그 안에서 사용해야 한다.

link vs import

다만 <link>와 @import 중 무엇을 사용할지 정하기 전에 둘 사이의 어떤 차이점이 있는지를 알아야 하는 것 같다.
참고 자료: http://egloos.zum.com/seye2/v/2319809

이해한 대로 정리하자면, 특정 버전의 IE에서 호환성 문제가 생길 수 있다는 것인데 @import를 사용하면 .css 파일보다 .js 파일이 먼저 로드되어 DOM Query 사용시 문제가 발생할 수 있다는 것이다.

그렇다면 크롬 브라우저에선 어떻게 나올까?

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @import url('css/style.css');
    </style>
    <script src="js/a.js" type="text/javascript"></script>
  </head>
  <body>
    <a>hi</a>
  </body>
</html>

크롬 브라우저에서 실험해 본 결과로는 .html -> .css -> .js 순서대로 들어오는 것 같다. 크롬에서 사용하면 괜찮을 듯?

Pan Gesture 사용 - 1
[leetcode] Keep Multiplying Found Values by Two

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage