코딩응애의 개발블로그

생활코딩(WEB2-CSS CSS 등장 이전의 상황~CSS 속성을 스스로 알아내는 방법) 본문

HTML CSS

생활코딩(WEB2-CSS CSS 등장 이전의 상황~CSS 속성을 스스로 알아내는 방법)

이너멜 2021. 8. 21. 11:59

주석

<!-- 안에 코드들 --> 주석 처리가 된다 (html 에서만 해당) /* 안에 코드 */ (CSS 에서 주석처리 방법)

<style> 태그

html 문법 이면서 동시에 <style> 태그 안쪽에 있는 내용은 CSS니까 이것을 CSS 언어에 문법에 맞게 해석해서 처리 하라는 의미 <head> 태그 안에다가 씁니다.

그리고 웹 브라우저야 이 웹페이지에 있는 모든 <a> 태그에 대해서... 라는 뜻은 a 라고 쓰면 됩니다.

<style>
    a {
      color:red;
    }
</style>
<!-- a 태그가 있는 문장 색깔을 빨간색으로 바꿈 -->

웹페이지의 CSS를 삽입 하는 방법에는 style 태그와 style 속성을 이용하는 방법이 있는데 style 속성을 쓰면 그 속성의 값을 웹 브라우저는 CSS의 문법에 따라 해석해서 해석된 결과를 style 속성이 위치하고 있는 태그에게 적용을 합니다.

<a href="2.html" style="color:red">Euro Truck </a>
<!-- 글자색이 빨간색이 됨 -->

style 태그는 효과만 있어서는 그 효과를 누구에게 지정할지 설명할 수가 없기 때문에 위에 예시 처럼 a { } 이런게 필요한데 a { } 는 이 웹페이지에서 우리가 주고 싶은 효과를 누구에게 줄것인가를 선택한다라는 점에서 선택자라고 합니다.

그리고 효과는 적용되어 나타나게 될 CSS 효과를 CSS 문법을 통해 표현을 한것 입니다.

참고로 style 속성을 이용할때는 선택자는 필요가 없습니다.

  <style>
    a {
      color:black;
      text-decoration: none;
    }
</style>
<!-- a{ } 이 부분이 선택자(selector)이고 선택자 안에 코드들이 효과(declaration)또는 선언이라고 함
color:black; 여기서 color 이 부분은 속성(property)라고 하고 black; 이 부분은 value 라고 합니다
위에처럼 여러개의 효과를 쓸때는 ;(세미클론)으로 구분을 해줍니다. -->

인터넷 검색으로 속성을 스스로 알아내는 법 

예를 들어 글씨 크기를 키우고 싶다 하면 CSS 에서 text (글씨) size(크기)에 관한 property(속성)  CSS text size property 라고 검색하면 나옵니다 이렇게 이제 무엇을 검색하고 싶고 그게 무엇인지 아니까 검색을 해서 알수 있습니다

font-size: 45px; <!-- 글씨 크기 -->
text-align: center; <!-- 글씨를 가운데 정렬을 할때 align은 정렬이라는 뜻 -->

 

저작자표시 비영리 변경금지

'HTML CSS' 카테고리의 다른 글

드림코딩&생활코딩(CSS 선택자, display, position)  (0) 2021.09.17
생활코딩(WEB2-CSS 반응형 디자인 ~ 마무리 )  (0) 2021.09.05
생활코딩(WEB2-CSS CSS 선택자를 스스로 알아내는 방법~그리드)  (0) 2021.08.23
생활코딩(WEB1 - HTML & Internet 부록: 코드의 힘 까지)  (0) 2021.08.12
생활코딩(WEB1 - HTML & Internet 최후의 문법 속성과 img까지)  (0) 2021.08.11
'HTML CSS' Related Articles more
Comments