티스토리 뷰
<style>
</style>은 html 내에서 내부는 CSS의 문법에 따라 작성된다는 표기이다.
ex)
<style media="screen">
h1, a{
border-width:5px;
border-color:red;
border-style:solid;
}
</style>h1과 a(링크)에 속하는 태그는 5px 두께의 빨간 직사각형으로 둘러진다.
콤마 표시를 통해 여러개의 태그에 적용할 수 있다.
여기서 border라는 겹치는 부분은 아래와 같이 줄일 수 있다.
<style media="screen">
h1, a{
border:5px solid red;
}
</style>border하고 한번 선언해준뒤, 띄어쓰기 구분으로 적어주면 알아서 어떤 프로퍼티를 요청하는지 파악하는 모양이다.
그 외 관련 속성은 이정도 알아두면 좋다 (padding, margin)
CSS는 기본적으로 저런 box model이며 이를 활용하여 디자인함
위와같이 CSS를 적용하는데 있어 우선순위가 있다.
id > class > tag 의 적용 우선순위를 지닌다.
<style>
a {
color:black;
}
.saw { /*.을 통해 class saw를 가리키는 selector가 된다.*/
color:gray;
}
#active {
color:red;
}
h1 {
font-size:45px;
text-align: center;
}
</style>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<ol>
<li><a href="1.html" class="saw">HTML</a></li>
<li><a href="2.html" class="saw" id="active">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
...style 내부를 보면
a 태그 : 별다른 표시 필요하지 않음. 글씨 색 검정
saw 클래스 : style 내부에서 .을 통해 설정 가능. 글씨 색 회색
id 식별자 : style 내부에서 #을 통해 설정 가능. 글씨 색 빨강
이렇게 설정이 되어있는데, 우선순위는 id>saw>a 가 되는것임
따라서 위 바디에 있는 HTML은 saw class가 우선순위가 높으므로 회색 글씨,
CSS는 id가 우선순위가 높으므로 빨강 글씨,
javascript는 a 설정에 따라 검은 글씨가 되는 것이다.
웹페이지 분석에 있어, 우클릭-검사 를 잘 활용하자.
직관적으로 파악할 수 있는 아주 좋은 도구.
여태 태그로 a, h1, h2 ol 등 여러가지를 써왔으나, 이 태그들은 기본적으로 어떠한 목적이 주어진 태그들이다.
그런 것 없이 내가 원하는 커스텀의 디자인 태그를 만들고 싶을때, div와 span을 쓴다. 둘의 차이는 inline이냐 block이냐임
위는 span(inline level element), 아래는 div(block level element)
그리고 여기서 display:grid; 속성을 통해 배치를 정할 수 있다.
<style media="screen">
div{
font-size:30px;
border: 5px solid gray;
}
#grid{
border: 5px solid pink;
display:grid;
grid-template-columns:300px 1fr;
}
</style>
<body>
<div id="grid">
<div>NAVIGATION</div>
<div>ARTICLE</div>
</div>
</body>body를 보면 알겠지만 navigation과 article을 id grid로 묶었다.
그리고 style에서 id grid에 grid-template-columns:300px 1fr;을 부여했다.
해당 id에 속해있는 element를 column단위로 grid를 한 것임을 직관적으로 확인할 수 있다.
띄어쓰기 기준으로 좌->우 300px, 1fr을 부여한것이다.
여기서 fr이 무엇이냐 하면...
#grid{
border: 5px solid pink;
display:grid;
grid-template-columns:1fr 2fr;
}이처럼 이번엔 1fr, 2fr을 부여했다고 하자.
1:2의 비율이라는 것이다.
따라서 위 300px 1fr은 뭐였나면... 첫번째 div element에 300px 고정값을 주고, 나머지는 두번째 div element가 1의 비율(100%) 다 차지했다는거시다.
ol { } 하면 모든 ol에 대해 적용이 되어버리는데, 이 모든 ol마다 따로 id를 부여할 필요가 없다.
위처럼 띄어쓰기 구분으로 앞에 상위 id를 적어주면 grid id 하위에 존재하는 ol에 대해, 라는 조건이 붙게된다.
#grid #article과 같은 방식도 가능은 하다(하위 값이 id라 사실 의미는 없으나, 코더의 가시성을 위해서라면 의미가 있는 방식이라는 듯.)
위의 grid를 이용해 예쁜 페이지를 만들었다고 하자.
그렇지만 저 화면의 배율이 마구 바뀐다면? 수많은 해상도의 모니터들에 어떻게 대응할까?
이에 대해 탄력적으로 페이지 구성비율이 바뀌어야하지 않을까?
이를 위해 '반응형 디자인'을 사용한다.
<style>
div{
border:10px solid green;
font-size:60px;
}
@media(min-width:600px) {
div{
border:10px solid pink;
}
}
</style>
</head>
<body>
<div>
Responsive
</div>
</body>Responsive 라는 div element를 만들고,
스타일은 10px의 초록색 사각형, 60px 글자로 설정했다.
그리고 @media(조건) {조건 달성시 실행} 으로 반응형을 설정한다.
조건의 min-width:600px을 보면 알겠지만 최소 width가 600px인 상황에서 10px 핑크색 border가 되는 것이다.
물론 저 괄호 안에는 width 조건뿐만 아니라, 모바일이라면 가로모드 세로모드 조건도 들어갈 수 있겠다.
이를 활용해본다.
아까만든 페이지는 이렇게 width가 너무 줄어들면 좌측의 리스트가 불필요하게 좌측 화면을 과하게 차지한다.
CSS 본문의 가독성도 이때문에 덩달아 떨어지는데, 좁은 width에서는 grid column 구조를 안보이게 해야겠다.
위와같이, 700px width가 최대일때는 grid id의 display를 grid에서 block으로 변경했다.
이렇게 된다. 상단 리스트의 우측 선을 지울 필요가 생겼다.
간단하게, border-right를 none으로 바꿨다.
이 레이아웃 코드를 수백개의 페이지에 적용한다고 생각해보자. style을 매번 모든 html에 붙여넣을것인가?
파일의 분할이 필요한 때이다. 간단함.
style 내부의 css 파일을 따로 분리한 후, link를 사용한다.
<link rel="stylesheet" href="style.css"> 한 줄을 통해 모두 적용 가능하다.
가시성, 재사용성, 효율성, 캐시경제성을 모두 챙길 수 있는 것이다.
물론 본문의 div는 페이지마다 직접 설정해야 함을 잊지말좌.
※ 추천사이트 https://caniuse.com/
Can I use... Support tables for HTML5, CSS3, etc
caniuse.com
내가 막 인터넷에서 필요한 기능을 찾아쓴다고 치자. 그런데 이 기능이 오직 크롬에만 적용된다면?
다른 사이트에서는 무용지물이라면?
이를 확인할 수 있는 사이트이다. 더불어서 인터넷 사이트들이 해당 코드를 얼마나 사용하는지에 대한 대중성도 확인 가능
'■ FE 로드맵 > ◻ WEB 기초' 카테고리의 다른 글
| javascript로 html과 상호작용하기 (0) | 2022.07.27 |
|---|---|
| MySQL 겅부 (0) | 2022.07.21 |
| javascript 백준 기초 (0) | 2022.07.20 |
| Node.js 겅부 (0) | 2022.07.13 |
| WEB javascript 기초 (0) | 2022.06.02 |