내 작페에 있는 설정 정리 란임.
근데 모바일로 볼 때 양 옆에 공백이 좀 거슬림.
이뿐만이 아님. 하위 목록 앞의 여백이 존나 태평양임. 난 목록화 해서 정리하는거 좋아하는데, 요지랄 나있다 보니 3단 목록 만들면 거의 뱀의 손 요단 페이지마냥 글이 페이지의 절반만 쓰여있게 됨;;
탭의 양 옆 여백을 좀 줄일 순 없을까?
목록 서식의 앞 여백을 좀 줄일 수 없을까?
이건 내가 어떤 div 구문 만드는 것도 아니고, 이미 있는 서식을 변화시키는 건데... 가능은 하려나?
가능. 쌉가능.
이것에 대한 이야기를 하기 전에 잠시 HTML의 태그에 대해 이야기 해야 한다.
HTML은 태그라는것으로 이루어져 있음. 태그는 여는게 있고 닫는게 있고, 이 열고 닫고 하는건 대충 우리가 위키닷에서 하던 [[footnote]] 각주 내용 [[/footnote]]하는거, //기울임// 하는거와 똑같은거임.
아카라이브 글 편집창의 오른쪽 위에 < > 이 아이콘 누르면 님이 지금 쓰고 있는 글의 html을 볼 수 있음.
이 페이지에서 보이는 모든 것들은 <body>와 </body>사이에 있음.
그럼 그걸 어떻게 볼까?
웹페이지의 소스코드를 볼 수 있다면 진짜 개쩔텐데...
컴으로 보는 사람들은 F12를 눌러보라. 뭔 경고창 뜰텐데 ㅇㅋ 하면 됨.
그리고 요소란으로 가보면...
정말 끔찍한 코드 덩어리가 오른쪽에 나타난걸 볼 수 있음.
이게 바로 개발자 콘솔임.
콘솔의 왼쪽 상단에 네모안에 커서가 있는걸 클릭하면 각각의 요소를 선택할 수 있음.
한번 아카라이브의 탑바를 선택해 보자.
자, <div class="root-container">와 </div> 보임?
위의 탑바에 있는 구독 채널, 주요 채널, 채널 검색, 찾기 이런것들은 바로<div class="root-container">와 </div> 안의 <nav class="navbar navbar-dark navbar-expand">와 </nav> 안의 <a>, <ul>, <form> 등등인거임.
어? div? class?
그렇다. 우리가 아는 익숙한 그것이 맞음.
div는 우리가 임의로 정한 네모 공간을 뜻함. 아카라이브 위에 있는 저 네모칸 역시 우리가 지난번에 배운 것과 똑같은거임.
한번 CSS 코드를 뜯어볼까? 왼쪽 아래 스타일 란에 자세히 나와 있음.
.body .navbar-wrapper {
z-index: 1034;
position: relative;
background-color: #3d414d;
background-color: var(--color-bg-navbar);
border-bottom: 1px solid var(--color-border-navbar);
}
이렇게 나오네. 취소선은 다른 속성으로 덮어씌워졌다는 걸 뜻함.
var는 변수. 그러니까 미리 앞에서 --color-bg-navbar에다가 #242424라는 텍스트를 저장시켜 놓은거임. 그리고 #242424는 색깔 표현식이고
바로 요 탑바의 배경 색깔인거를 알 수 있지.
전에 앞에 점(.)있으면 클래스라고 했지?(이걸 CSS의 선택자라고 함. 태그는 점 없이, 클래스는 앞에 점, 아이디는 앞에 #이 붙음.)
.body .navbar-wrapper { <- 요거는 바로 body라는 이름의 클래스(body 태그와는 다름!!)와 .navbar-wrapper라는 이름의 클래스에 저장한 속성이라는 거지.
근데 여기서 개쩌는거.
개발자 콘솔은 단순히 코드 긴빠이만 할 수 있는게 아니라 코드를 임의로 내가 수정해서 넣을 수 있음.
한번 백그라운드 컬러를 바꾸어 보자.
아카라이브를 자진입대 시켜 보자.
배경색을 red로 바꾸나 보다시피 기합이 여간이 아니게 바뀌었다.
같은 방법으로 다른 본문의 배격색도 바꾸어 착실하게 해병화를 시켜보자.
오른쪽의 요걸 눌러보면 그 속성이 어디서 어떻게 정의되어 잇는지를 쉽게 알 수 있다.
하나하나 찾아서 background-color 속성을 red로 바꾸어주자.
.sidebar .sidebar-item .body .board-article
자, 이 속성을 바꾸어 보았다.
아아 이 앙증맞은 웹디자인을 보라!
반 고흐가 이 디자인을 본다면 눈물을 흘리며 오공본드로 자신의 귀를 다시 붙였을 것이다.
아직 더 재미있는게 남았다.
HTML 코드도 수정이 가능하다..!
이 말인 즉, 내부의 텍스트도 변환이 가능하다는 것.
자 내가 아카라이브를 해킹했다.
보다시피 모든 형태의 텍스트가 다 변경이 가능하다.
...
보면 알겠지만 이거 인터넷 주작에서 사용되기 정말 용이한 물건이다.
어디 갤러리 아무 글 들어간 뒤에 본문 내용을 악의적으로 바꾸고 글쓴이도 고로시 하고 싶은 사람으로 바꾸면?
그걸 캡쳐해서 퍼뜨리면?
사람 하나 병신만드는거 일도 아니다.
고로 참된 누리꾼들은 인터넷에 존재하는 모든 캡쳐를 믿지 말아야 한다.
아무튼 이것들은 내 컴퓨터에서만 저렇게 적용되는거고, 새로고침하면 원래대로 돌아온다.
자, 길고 긴 이야기를 돌아왔다.
다시 본론으로 돌아와서, 사이트에서 이미 설정된 서식을 어떻게 변환시킬 수 있을까?
아까 방법대로 하면 된다.
선택하고
속성을 확인!
ul 태그는 순서 없는 목록을 표시하는 태그.
그리고 이제 적용을 해야 하는데!
어떻게 적용하나?
간단함. 이렇게 새 속성을 부여 해주면
끝
내친김에 탭의 여백도 수정해 보자.
문제는 모바일환경에서 양 옆의 여백이 큰 거였는데, 지금 보니 탭의 문제가 아닌, 내용물을 담고 있는 div 구문의 margin값이 너무 큰게 문제였다.
바로 요놈의 문제! 저 box 클래스는 본래 저 글이 적혀있던 21K기지 서류의 div구문을 긴빠이 한 것이다.
em(= 텍스트 크기 값)이기에 작은 화면의 큰 텍스트일 땐 양 옆이 오지게 커졌던 것이다.
난 PC 화면에선 적당한 여백이라고 생각하기에, 모바일 환경에서만 서식을 바꿔주겠다.
CSS 팁: @media - SCP 재단 채널 (arca.live)
바로 여기서 나오는 @media 구문을 사용해서 말이다.
이렇게 해주면...
훨씬 보기 편해졌다!
자. 이제 님들은 커스텀 테마를 만든거나 마찬가지임.
지금까지 님들이 한건 시그마-9 테마에서 정의된 CSS 코드를 본인 입맞에 맞게 변형시킨 거임.
이걸 오지게 지지고 볶아서 다른 디자인에 다른 서식의 다른 이미지를 넣어 만든 독자적인 페이지를 만들어 낼 수 있다면,
그게 바로 테마임.
테마 아래에 있는 소스코드가 바로 이 CSS 덩어리인거임!
F12는 진짜 마법의 툴이고, 어떤 사이트든 얼마든지 접근할 수 있다는 강력한 장점이 있는 만큼 초보 CSS 입문러에게 많은 도움이 됨.
나무위키에 HTML의 각 태그가 무엇을 뜻하는지, CSS에서 각 요소를 어떻게 선택하는지, 그리고 developer mozilla에서 각 속성이 무엇을 의미하는지 모든 정보가 다 나와있으니 그것들을 참고해 보셈.
처음엔 막막해도 한번 할 수 있게 되면 정말 쉽고 강력한게 CSS임.
이것저것 다른 사람들의 코드도 긴빠이 해보며 CSS에 익숙해지고, 나만의 커스텀 서식을 완성을 해보자..!!!
+ 추가 정보
HTML에서 CSS를 곧바로 작성하고자 한다면 태그 오른쪽에 style="속성들" 이렇게 써주면 됨. 전에 위키닷 div 구문 할 때랑 똑같음.
<ul style="color=red;"> 이러쿵 저러쿵 </ul>
이런식으로.
또한 HTML에 <style>이란 태그도 따로 존재하는데, 이 사이에 CSS코드를 쓸 수도 있음. 보통 <body> 태그 바로 안쪽에, 혹은 <body>태그 밖에다가 쓰곤 함.
즉, 요건 위키닷의 [[module CSS]] 구문과 같은 역할임
여기까지 길고길었던 HTML & CSS의 간단 정리 시리즈 끝!!!
이 외에도 궁금하거나 안되는게 있으면 여기 질문탭 이용 바라고,(내가 어떻게든 아는 한도 내에서 답변 해줌) 그래도 안되면 디스코드 채팅방의 군기시 채널에서 물어보면 됨.
그리고 혹시라도 javascript를 공부해서 존나 CN-994-DEL 같은 쩌는거 만들어 보고 싶다면 유튜브에서 코딩 알려주는 인도인 니꼴라스 아저씨가 운영하는 강좌 사이트인 노마드 코더 Nomad Coders를 참조해 보기를 바람. 여기서 무료로 자바 스크립트 공부할 수 있음.
본인도 이걸로 요새 공부중에 있다.
그리고 단순히 재단에서 글쓰는거 이외에도 HTML과 CSS 그리고 자바스크립트를 할 줄 안다는 건 프로그래밍의 프론트엔드 업무를 해낼 수 있다는 걸 뜻하기도 함. 취미삼아 시작한 공부가 나중엔 취업에도 도움이 될지도 모르는 일이니 다들 한번쯤은 찍먹해 보는것도 나쁘지 않음.
그럼, 부족한 설명, 노잼 드립 받아가며 읽어주며 이 시리즈에 관심 가져 줘서 고맙다.
ㅂ2ㅂ2
