HTML/CSS

HTML

 

• HTML (Hypertext Markup Language,하이퍼텍스트 마크업 언어)는 프로그래밍 언어는 아니고, 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어입니다. 
• 이는 개발자로 하여금 복잡하게도 간단하게도 프로그래밍 할 수 있습니다. HTML은 elements로 구성되어 있으며, 이들은 적절한 방법으로 나타내고 실행하기 위해 각 컨텐츠의 여러 부분들을 감싸고 마크업 합니다. 
• tags 는 웹 상의 다른 페이지로 이동하게 하는 하이퍼링크 내용들을 생성하거나, 단어를 강조하는 등의 역할을 합니다.

 

만약 어떠한 문장을 그냥 그 자체로 표시하고 싶다면, 태그 중  (<p>)로 감싸 엘리먼트를 문단으로 명시할 수 있습니다.

<p>My Code is Good</p>

 

 

 

 특징

 

 

 

엘리먼트의 주요 부분은 다음과 같습니다.

 

1. 여는 태그(Opening tag): 이것은 요소의 이름과(이 경우 p), 열고 닫는 꺽쇠 괄호로 구성됩니다. 요소가 시작(이 경우 단락의 시작 부분)부터 효과가 적용되기 시작합니다.
2. 닫는 태그(Closing tag): 이것은 요소의 이름 앞에 슬래시(/)가 있는것을 제외하면 여는 태그(opening tag)와 같습니다. 이것은 요소의 끝(이 경우 단락의 끝 부분)에 위치합니다.  닫는 태그를 적어주지 않는 것은 흔한 초심자의 오류이며, 이것은 이상한 결과를 낳게됩니다.
3. 내용(Content): 요소의 내용이며, 이 경우 단순한 텍스트입니다.
4. 요소(Element): 여는 태그, 닫는 태그, 내용을 통틀어 요소(element)라고합니다.

 

 

 

CSS

 

•  CSS (Cascading Style Sheets)는 웹페이지를 꾸미려고 작성하는 코드입니다.
• 웹 페이지에 스타일과 레이아웃을 적용할 때 사용합니다. 예시를 몇 가지 들자면 글꼴, 색상, 크기를 조절하고, 콘텐츠의 간격을 조정하고, 페이지를 여러개의 열로 나누고, 애니메이션 등 장식을 추가할 수도 있습니다. 

 

 

특징

 

• HTML와 같이 CSS는 실제로 프로그래밍 언어는 아닙니다. 마크업(markup) 언어 도 아닙니다. Style sheet 언어 입니다.
• HTML 문서에 있는 요소들에 선택적으로 스타일을 적용할 수 있다는 말입니다. 예를 들면, HTML 페이지에서 모든 문단 요소들을 선택하고 그 문단 요소들 안에 있는 텍스트를 빨갛게 바꾸려고 한다면 다음과 같이 CSS를 작성할 수 있습니다.

 

p {
  color: red;
}

 

• 선택자(selector): rule set의 맨 앞에 있는 HTML 요소 이름. 이것은 꾸밀 요소(들)을 선택합니다 (이 예에서는 p 요소). 다른 요소를 꾸미기 위해서는 선택자만 바꿔주세요.
• 선언: color: red와 같은 단일 규칙; 여러분이 꾸미기 원하는 요소의 속성을 명시합니다.
• 속성(property): 주어진 HTML 요소를 꾸밀 수 있는 방법입니다. (이 예에서, color는 p 요소의 속성입니다.) CSS에서, rule 내에서 영향을 줄 속성을 선택합니다. 속성 값속성의 오른쪽에, 콜론 뒤에, 주어진 속성을 위한 많은 가능한 결과중 하나를 선택하기 위해 속성 값을 갖습니다.

 

 

 

rule set

 

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

 

• 각각의 rule set (셀렉터로 구분) 은 반드시 ({}) 로 감싸져야 합니다.
• 각각의 선언 안에, 각 속성을 해당 값과 구분하기 위해 콜론 (:)을 사용해야만 합니다.
• 각각의 rule set 안에, 각 선언을 그 다음 선언으로부터 구분하기 위해 세미콜론 (;)을 사용해야만 합니다.

 

 

 

 

CSS Media Query

 

• 미디어 쿼리는 화면(screen), 티비(tv), 프린터(print)와 같은 미디어 타입(media type)과 적어도 하나 이상의 표현식(expression)으로 구성됩니다.
• 표현식은 width, height, color와 같은 미디어 특성(media feature)들을 이용하여 그 특성들의 상태에 따라 다른 스타일 시트를 적용할 수 있습니다. 미디어 쿼리는 CSS3에 포함되어 있으며, 컨텐츠의 변경없이 주로 화면의 크기에 따라 스타일 시트를 달리하여 적절한 모양을 보여줄 수 있습니다.

 

 

 

특징

 

 

스타일 시트내에서 @media 를 사용합니다. 조건이 맞으면 {...}  안의 스타일이 적용됩니다.

 

@media screen and (max-width: 768px) 
{ 
body { background-color: lightgreen; } 
}

 

• @media (max-width: 768px) {...} 처럼 미디어 타입을 생략하면 all 이 기본값이 되어 모든 미디어 타입에 적용이 됩니다.
• 미디어 특성에서 max-width 와 min-width 가 가장 일반적으로 쓰입니다.
• 그외 height, color, orientation(화면의  가로 세로 방향) 등이 있습니다.
  
  

반응형 웹을 만들때 스타일을 작성하는 기준으로 모바일을 우선할것인지, 데스크탑을 우선할 것인지가 먼저 고려되어지는 편입니다.

 

/* 모바일에 적용될 스타일을 먼저 작성합니다. */ 

@media screen and (min-width: 769px) {
/* 데스크탑에서 사용될 스타일을 여기에 작성합니다. */ 
}

 

/* 데스크탑에서 사용될 스타일을 먼저 작성합니다. */ 

@media screen and (max-width: 768px) { 
/* 모바일에 사용될 스트일 시트를 여기에 작성합니다. */ 
}