이미지 깔기. "이미지는 3줄."
줄 정리는 alt+shift+F
background-image: url('');
background-position: center;
background-size: cover;
유알엘은 그냥 킹덤사진 떠먹여주셨고,
코드스니펫으로 부트스트랩 들어가서 아주 간단히 코드를 따왔다.
부트 스트랩에서 헤더 라는 것을 찾아서
우 클릭 후 검사를 누르고 코드를 통째로 따왔는데
메인보다는 위에 붙여넣기를 해야 했다.
<body>
<header class="p-3 text-bg-dark">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
<svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"></use></svg>
</a>
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li><a href="#" class="nav-link px-2 text-secondary">Home</a></li>
<li><a href="#" class="nav-link px-2 text-white">Features</a></li>
<li><a href="#" class="nav-link px-2 text-white">Pricing</a></li>
<li><a href="#" class="nav-link px-2 text-white">FAQs</a></li>
<li><a href="#" class="nav-link px-2 text-white">About</a></li>
</ul>
<form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
<input type="search" class="form-control form-control-dark text-bg-dark" placeholder="Search..." aria-label="Search">
</form>
<div class="text-end">
<button type="button" class="btn btn-outline-light me-2">Login</button>
<button type="button" class="btn btn-warning">Sign-up</button>
</div>
</div>
</div>
</header>
<div class="main">
헤더 코드는 "main" 의 위로 들어가야 한다고 했다, 그렇다면
위치와 관련한 부분이 있기에 더 위에 일부러 넣는 것 같았다.
어떤 것들은 위치랑 상관 없어요 하고 알려줬기 때문이다. 사실확인 해보자.
맞았다. 메인 아래에 넣으니 아래에도 생성이 되었다.
이러한 부분들은 짚을 수 있으면 간단히 짚고 실행취소를 해도 좋을 것 같다.
화면 전체적인 색이 까만색이려면, 뭔가 백그라운드 컬러를 넣어야 할 것 같은 느낌이 바로 드는데
바디가 그냥 다 검은색으로 되면 된다.
원래는 이름 지정을 해서 태그를 붙이는데
바디는 그냥 하나밖에 없고 바로 식별 되니까 바디를 그냥 백그라운드 블랙으로 해준다.
그냥 이름은 body
태그로 되어있으면 .main
이렇게 점을 붙여서 들어간다.
올 꽤 쉬크하게 잘 나왔다;
2, 3강
html 페이지에서 그냥 우클릭 검사를 통해
코드를 따와 띄워놓은 화면에서 버튼에 해당하는 창들에 우클릭 후 검사를 누르면
element.style 에서 코드 실험을 바로 직관적으로 해볼 수가 있다.
그냥 다 코드를 복사해오는 것이고 간단하다.
col 이라는 것이 한 덩어리로 보고 접고....
=>
col = column
기둥.. 그리드 격자... 대충 그런 것 같다.
그냥 그래서 col 왼쪽 화살표 접으면 딱 간략히 접어서 정리가 가능하다.
--------------------------
예전에 알던 친구가 하늘나라로 갔다.
잘 나가는 애라 열등감 때문이었는지, 어렸을 때 내가 떠들어 댄 근자감 발언 때문이었는지... 일부러 연락 안 했는데
너무 찌질대지 말고, 그 친구가 유명해지니 연락하는 것으로.. 갑자기 내가 속물로 보일까? 눈치가 괜히 보였다.
그냥 나는 양심에 털 없이, 있는 그대로 자신있게 안부도 묻고 했으면 되는 거 였는데,
어쨌든 이제 와서 뭔 말이 소용 있겠나,
아무튼 나중에 보자.! 좋은 곳에서 잘 쉬고있어 앞으로 사는 동안에 좀 찌질거리지 좀 말고 살아야 겠다
곧 보자 ㅋㅋㅋ 시간 빠르니깐 ㅋㅋㅋ
