<style> 바꿀 스타일 </style> : 웹브라우저가 문서를 읽을 때, css문법에 맞게 해석하도록 처리함
선택자(selector) : 선택할 부분 ex) a: 모든 부분 선택
속성(property) : 선택된 부분의 어떤 것을 바꾼건지 ex) color
값(value) : 속성을 어떻게 바꿀건지 ex) red
a{ color:red } : 해당 부분 전부 색 빨간색으로 바꿈
<style="color:red">내용 : 내용 부분 글씨 빨간색으로 바꿈
text-decoration:none; : 밑줄 지우기
text-decoration:underline; : 밑줄 추가
font-size:40px; : 폰트 사이즈 변경
text-align:center; : 가운데 정렬
border-width : 테두리의 두께 -> border:5px 으로 사용가능
border-color : 테두리의 색깔 -> border-color없이 red만 사용가능(값만 사용가능)
border-style : 테두리의 종류 //solid : 단선 -> border-style없이 solid만 사용가능(값만 사용가능)
padding:20px : 외부와의 간격(20픽셀)
margin:5px : 요소 사이의 간격
display:block : (디폴트값) -> width 속성을 통해서 100px로 조정하거나 기타 수치로 조정 시 block레벨이 아닌 inline 레벨로 변경됨
class="saw" : 링크 방문 유무 //"saw active" 처럼 띄어쓰기로 클래스 여러가지 부여 가능(잘못된 사용 방법) -> 우선순위로 처리
올바른 사용 : class="saw" id="active" //id에 해당하는 것은 #으로 사용 ex) #active
style 태그에 .saw { 속성:값 } : 지정한 saw 클래스의 속성에 해당하는 값 변경
*class 우선순위
1. ID 선택자 : #active
2. 클래스 선택자 : .saw
3. 태그 선택자 : a, h1 등
<div>태그 : 디자인을 위해서 작성하는 태그 //block level elements
display:grid : display에 grid를 사용
grid-template-columns:150px 1fr; : 하나의 컬럼에서 배치하고, 첫 번째 컬럼은 150px로 지정해주고, 두 번째 컬럼은 나머지 공간을 다 사용한다는 뜻
media 쿼리 : 화면에 반응하는 반응형 웹페이지 만드는 문법
@media(min-width:800px) { div { display:none; } } : 가로 사이즈가 800px 이상이면 화면에서 div 태그를 표시하지 마라
<link rel="stylesheet" href="style.css"> : style.css 파일을 이용해 모든 파일에 style을 일괄적용시키기 위한 문법
css를 적용한 첫 인덱스 화면
CSS를 클릭했을 때 이동하는 페이지
* 장점
1. 이전 html만 사용한 것과 달리 좀 더 디자인적으로 여러가지를 추가할 수 있다.
2. style.css 파일을 이용해서 원하는 html 파일들에만 일괄적으로 적용시킬 수 있기 때문에 생산성이 높아진다.
3. 화면에 동적으로 적용할 수 있다.
사용한 데모 사이트 만드는 곳 : https://app.netlify.com/drop
Netlify App
Loading Netlify dashboard
app.netlify.com
예제용 페이지 : https://gifted-liskov-6bbece.netlify.app/
Web - index
html CSS JavaScript Node.js Solidity Hypertext Markup Language (HTML)is the standard markup language for creating web pages and web applications. Web browsers receive HTML documents from a web server or from local storage and render them into multimedia we
gifted-liskov-6bbece.netlify.app
깃허브 주소 : https://github.com/tkdans7589/web-programming-study
tkdans7589/web-programming-study
web programmng basic. Contribute to tkdans7589/web-programming-study development by creating an account on GitHub.
github.com
참고한 사이트 : https://kimsfamily.kr/
KimsFamily
블록체인, 암호화폐 교육 및 컨설팅, 재태크, 디지털노마드, 유용한정보
kimsfamily.kr
