[CSS] 1. 기본문법

CSS : Cascading Style Sheet

css는 html파일에서 <style> 태그 안에 구현한다.

   <head>
        <meta charset = "utf-8" />
        <style>
            h1 {color:red}
            
        </style>
    </head>

이처럼 html 코드 안에 <style> 태그가 있고 그 태그 안에 css 코드가 들어간다.

h1의 컬러를 red로 하라는 뜻!

selector(선택자){description(서술)}

어떤 효과를 선택자에게 줄 것인지 서술하는 것! 이것이 CSS

  h1 {color:red; font-size:10px}

요로코롬 생긴 코드가 있다고 하면 color와 font-size 각각이 h1의 속성이 되는 것이고, 속성을 구분해주는 구분자는 세미콜론(;)이다.

  h1,h2 {
  	color:red; 
    font-size:10px
 }

이런 식의 지정도 가능하다!

만약에 여러 h1중에 header에 있는 h1에만 효과를 적용하고 싶다면?

header h1{
	border:1px solid red;
}

이런식으로 지정할 수 있다. 참고로 이 코드는 텍스트에 사각형을 씌우는 코드이다.

참고로 border의 속성을 지정하는 1px, solid, red의 경우는 공백으로 그 속성이 구분된다. 따라서 세가지의 순서를 바꿔서 써도 같은 결과가 나온다. (ex. border:solid red 1px)

만약 <li> 태그 중 일부에만 효과를 적용하고 싶다면? 아이디를 활용하자!

<li id="selected">CSS</li>

이런 식으로 태그에 id를 적용하고,

<style>
  #selected {
     border:1px solid yellowgreen;
  }
</style>

style, 즉 css 코드 안에 #id를 쓰고 속성을 정의해주면 된다!

그러면 이렇게 list 중 한 개의 리스트에만 속성을 적용할 수 있다!

+padding은 안쪽 간격, margin은 바깥쪽 간격이다. xml이랑 굉장히 유사하군

예제 3도 구현해보자

<html>
    <head>
        <meta charset = "utf-8" />
        <style>
            img{
                border:1px solid red;
                float:right;
            }
        </style>
    </head>

    <body>
        <img src="https://s3.ap-northeast-2.amazonaws.com/opentutorials-user-file/course/94.png" />
        생활코딩의 세계에 오신 것을 환영합니다. 생활코딩은 일반인들에게 프로그래밍을 알려주는 것을 목적으로 하는 비영리 활동입니다. 그간 프로그래머들이 이룩한 성취를 일반에 알려서 고독한 프로그래머들의 관객을 모객하는 활동이기도 합니다. 생활코딩은 세 가지로 구성되어 있습니다.
       
       
      온라인 강의
       
      생활코딩의 강의는 수업과 사전으로 구성되어 있습니다.
       
      입문자의 가장 큰 고충은 '무엇을 모르는지 모르는 상태'일 겁니다. 온라인에는 프로그래밍을 익히는 데 필요한 거의 모든 정보가 있지만, 이 지식들은 게시판이나 블로그 또는 커뮤니티에 포스팅 단위로 파편화되어 있습니다. 그래서 최소한 무엇을 검색해야 하는지를 아는 사람들을 위해서는 더 없이 좋은 공간이지만, '무엇을 모르는지 모르는 상태'의 입문자에게는 그림의 떡으로 남아 있습니다. 다시말해서 전문가를 더욱 전문가답게 만드는 혁신에 머물고 있는 것이죠.
       
      생활코딩 실습 시리즈인 웹 서비스 만들기는 웹 기반의 서비스를 만드는 최소한의 절차를 배경지식 없이 무작정 따라하는 코스입니다. 이 코스를 완주하면 웹서비스가 어떤 맥락에서 시작되고, 어떤 과정을 통해서 현실화 되는지에 대한 전체적인 인상을 갖게 될 것입니다. 생활코딩을 지금 시작한다면 여기서 시작하시면 됩니다.
       
      생활코딩의 수업 시리즈는 먼저 익혀야할 것과 나중에 익혀야할 것을 순차적으로 배치해서 그 기술을 이해하기 위한 지식을 제공합니다. 그래서 '무엇을 모르는지 모르는 상태'에서 재빠르게 빠져나올 수 있도록 최소한의 것을 제공합니다.
       
      생활코딩의 사전 시리즈는 그 기술을 실제로 구현하기 위해서 필요한 정보를 직접 찾아볼 수 있도록 구성되어 있습니다. 수업을 통해서 '무엇을 모르는지'를 알았다면 이제 '모르는 것'을 스스로 찾아서 문제를 해결해야 합니다.
       
      생활코딩은 포괄적인 기술 커리큘럼을 지향합니다.
       
      자신이 필요한 것에 따라서 아래와 같은 순서로 공부하시면 됩니다.
       
      웹 프로그래밍
       
      웹 서비스 만들기 실습
      프로그래밍 오리엔테이션
      HTML
      CSS
      javascript
      jQuery
    </body>
</html>

'𝓡𝓸𝓸𝓶3:𝐹𝓇𝑜𝓃𝓉𝑒𝓃𝒹 > 𝓡𝟥𝟢𝟣:𝐻𝒯𝑀𝐿&𝒞𝒮𝒮' 카테고리의 다른 글

[HTML] 2. 의미론적인 웹 (0)	2021.01.01
[HTML] 1. HTML 기본 문법 (0)	2020.12.31

𝒪𝒹𝑒𝓃𝑔'𝓈 𝒮𝓉𝓊𝒹𝓎𝑅𝑜𝑜𝓂

[CSS] 1. 기본문법

'𝓡𝓸𝓸𝓶3:𝐹𝓇𝑜𝓃𝓉𝑒𝓃𝒹 > 𝓡𝟥𝟢𝟣:𝐻𝒯𝑀𝐿&𝒞𝒮𝒮' 카테고리의 다른 글

티스토리툴바

[CSS] 1. 기본문법

'𝓡𝓸𝓸𝓶3:𝐹𝓇𝑜𝓃𝓉𝑒𝓃𝒹 > 𝓡𝟥𝟢𝟣:𝐻𝒯𝑀𝐿&𝒞𝒮𝒮' 카테고리의 다른 글

'𝓡𝓸𝓸𝓶3:𝐹𝓇𝑜𝓃𝓉𝑒𝓃𝒹/𝓡𝟥𝟢𝟣:𝐻𝒯𝑀𝐿&𝒞𝒮𝒮' Related Articles

티스토리툴바