[TIL] 2022-11-06(일) HTML+CSS (생활코딩)

<parent>
     <child>
     </child>
</parent>

li태그는 반드시 부모태그를 가지고 ul/ol은 항상 자식태그를 가진다. 

<ul></ul> '<li>'의 부모태그.
<li></li> 목차(목록)를 쓸 때.  
자동으로 순서를 넘버링하고 싶다면?
부모태그로 <ul> 대신 <ol></ol> 사용.
l은 list의 약자.
ol은 ordered list.
ul은 unordered list.

<br> 단지 줄바꿈이라는 시각적인 의미만 가짐
<p></p> 어디서 어디까지가 같은 단락? ㅇㅇ
<img src=""> 이미지

댓글기능 서비스기능구현소스공유
<Disqus> 
<livere>

Tawk
실시간채팅기능
Analytics구글
방문자추적기
Opentutorials 방문자기록분석

<style> 너는 css내용이니까 그 문법에 맞게 해석해라는뜻

‘Style=“-”’ 이라는 속성이 css가 먹히는 효과를 앞에 줄 수 있음. 일부분에만 효과 주고 싶을때.

<style></style> 문법전환
a{} 선언 효과주는 범위

디스크립션의 끝을 알리기위한 ;세미콜론

text-decoration: none;
텍스트의 꾸밈/장식 없앰

a{} 이 웹페이지의 모든 텍스트
h1{} h1 타이틀에 해당하는 모든 텍스트
font-size : 00px; 글자크기
text-align:center; 글자위치

Class=“saw” 

Class가 “saw”인 태그를 기리킴

<style>
.saw {} - //Class가 “saw”인 태그를 기리킴
</style>

하나의 태그를 여러개의 클래스에 포함 시킬수도 있음

class=“saw active”와 같이 띄어쓰기로 구분
 둘 다에 포함되지만 active에만 포함되는 글자를 칭하고 싶다면 .active{}

-> 이렇게 지정한다면 범위로 따졌을때 더 가까운줄에 있는 범위 선언이 채택됨.(문제점)

해결 -> class=“saw” id=“active”

범위지정할때 .이 아닌 #active라고하면 id선택자가 .클래스 선택자보다 우선순위로 채택됨.

Id는 유일무이한 값이기 때문에 이 문서, 웹페이지에서는 id=active가 더이상 나오면 안된다.
=> 좀 더 구체적인것이 포괄적인것보다 우선순위가 높다. 

이와 같은 선택자는 많음
Css selector로 검색 가능

/*
*/
Css에서 주석달기

선택자도 콤마로 여러개 범주선택가능

Border 테두리
Padding 영토,영해
Margin 비무장지대, 줄간격
Width 좌우폭

F12-검사를 적극활용. 어떤 태그가 어떤 css의영향을 받는지 확인하기에 필수적인 도구가 됨.

●플럭스or그리드라는 기술이 효율적으로 레이아웃을 배치하는 궁극의 기술.

그리드가 최신 트랜드.

디자인이라는 목적을 위해서
어떠한 의미도 기능도 존재하지 않는
무색무취와 같은 디자인만을 위한 범위설정 태그가
바로 Division (기본적으로 block level element이기 때문에 좌우폭 모두를 사용)
<div></div>
같은 목적이지만 <span>은 inline element.

목록과 본문이 나란히 위치하게 되는 여러가지 방법중에 가장 최신의 방법인 'Grid'

ex)grid라는 id값으로 묶은 범위에 대해 css효과를 주고 싶다면
#grid{}

#grid ol{}
ㄴ모든 ol들 중에 grid를 부모 카테고리고 갖고 있는 것들만 모두 묶어서 칭함.

***display: 
ㄴ어떠한 태그가 표시되는 속성을 완전히 바꾸는 중요한 속성명령어.
#grid{
      border:5px solid pink;
      display:grid;
      grid-template-dolumns: 150px 1fr; //* 1fr이 무엇이냐! id값으로 묶은 요소끼리
화면의 범위를 차지하는 비율을 설정하는것. //* grid-template-columns: 2fr 1fr; 이라고 한다면 2:1 비율로 화면을 차지.

//* 현재 Javascript, HTML, CSS를 사용하는 웹사이트에서 얼마나 그 기술을 채택하고 있는지 최신의 트랜드나 사용비율을 알 수 있는 사이트. https://caniuse.com/

화면의 픽셀이 800보다 크다면 div속의 명령어를 실행. (미디어쿼리)

●반응형디자인● 생활코딩CSS-12강
반응형 디자인을 css를 통해서 구현하는 핵심적인 기능 '미디어쿼리'.
@media{}
미디어쿼리를 활용하면 화면이 어떠한 조건에 해당할때, 어떤 기능을 표출할지, 어떤 효과를 보여줄지 설정가능.

●모든 HTML에 같은 효과를 주고 싶다면? 같은 코드를 추가하고 싶다면?
기존의 HTML안에 커서가 껌뻑거리고 있는 자리에
별도의 CSS파일에 저장되어있는 CSS코드가 원래 있었던것처럼 동작해!
라고 하고싶다면? 링크태그를 활용 !
<link rel="stylesheet" href="style.css">
각각의 HTML 페이지에 해당 링크를 넣으면 됨.