안녕하세요
5월17일 2일차 - block, inline 속성 본문
첫 날에 일찍 왔지만 띄워앉기를 하는가 싶어 찾아가 앉은 자리는 뒷쪽이었습니다.
쌤과 거리가 멀어서 빔프로젝터 스크린이 잘 보이지 않고 목소리도 잘 들리지 않았습니다.
하지만, 두 번째 날부터는 쌤이 zoom 화면공유와 마이크를 준비해주었습니다.
다행히도 자리는 아무런 문제가 되지 않았습니다.
앞자리에 앉더라도 스크린보다는 내 모니터의 zoom 화면을 통해서 보는 것이 더 편할 것이기 때문입니다.
2일차는 따라서 코딩을 하는 시간과 배운 내용을 바탕으로 학습을 하는 시간이 있었습니다.
스스로 무언가를 만들어 보는 동안에는 시간도 잘 흘러갔습니다.
백준 문법 연습도 쉬지 않고 꾸준히 하려고 합니다.
오늘은 [기본 수학 단계 1712~] 입니다.
- jquery를 배우는 이유
리액트를 하게 되면 jquery는 쓸 일이 거의 없으나,
실제로 리액트만으로 개발하는 기업은 적고 95%는 옛날 방식으로 짜여있습니다.
- box의 기본성질
0. display : block
1. transparent
2. width : auto, height : auto
3. vertical 옆으로 오는 것을 허용하지 않습니다.
- inline의 기본성질
1. transparent
2. width / height 가 없습니다.
3. horizontal 옆으로 오는 것을 허용합니다.
- display : flex
box는 기본적으로 옆으로 오는 것을 허용하지 않지만
display : flex를 통해서 옆으로 올 수 있게 합니다.
- 폴더별로 정리는 필수입니다.
image
css
js
- index.html
은 입력이 생략되기 때문에 관습적으로 사용합니다.
ol,
li 도 박스,
inline 글자를 제외하고는 모두 박스입니다.
- 경로 입력 방식입니다.
./ 형제 폴더
../ 부모 폴더
../../ 부모 폴더의 부모 폴더로
- index.html 에서 형제 파일로 이동하기 위해서는 파일 이름만 링크하면 됩니다.
- 다른 폴더 안의 파일로 이동하기 위해서는
./형제폴더이름/파일이름
../부모폴더이름/파일이름
<a href="./doc/box01.html" target="_blank">box 01</a>
형제 레벨의 doc 폴더 안의 box01.html 파일을 엽니다.
target="_blank" : 새 탭에서 열기
<a href="../index.html"></a>
../ 상대적으로 작동하기 때문에 "상대경로"라고 부릅니다.
<a href=""http://naver.com">box 01</a>
http:// 에 등록한 경로를 "절대경로"라고 부릅니다.
주석은 자신과 타인 모두를 위한 것입니다.
주석에도 권장되는 정리방법이 있습니다.
<ul>
<li>
<!--
2022.05.17 young // 누가 언제 입력했음을 기록합니다.
경로 // 기록할 내용의 제목입니다.
./ 나의 형제 레벨 // 그리고 내용을 기록합니다.
../ 나의 부모 레벨
-->
<a href=""http://naver.com">box 01</a>
<p>태그의 성질</p>
</li>
</ul>
- css 스타일은 헤드 안에 적용합니다.
<link rel="stylesheet" href="../css/box01.css" />
</head>
- link로 연결하는 등의 동작은 모듈화(캡슐화)의 개념입니다. (components)
(.html)
<body>
<h1>박스의 기본 성질</h1>
<a href="../index.html">맨 앞으로</a>
<hr> <!-- 가로로 선을 긋기, 많이 안 쓰지만 레이아웃을 잡기 위해서 사용합니다. -->
<link rel="stylesheet" href="../css/box01.css">
</body>
(.css)
h1 {
color: red;
}
class 이름으로 선택할 수 있습니다.
.box01 {
background: #f00; /*빨간색*/
}
.box02 {
background: #ff0; /*노란색*/
}
.box03 {
background: #0f0; /*녹색*/
}
width : 50%
부모(body)를 기준으로 50%가 적용됩니다.
.box01 {
width: 50%;
background: #f00; /*빨간색*/
}
- margin 바깥쪽으로 띄웁니다.
- padding 안쪽으로 띄웁니다.
.box02 {
margin-left: 100px;
width: 100%;
background: #ff0; /*노란색*/
}
- width : 100% 와 auto 의 차이
}
.box02 {
margin-left: 100px;
width: 100%;
background: #ff0; /*노란색*/
}
width : 100%는 (부모)박스를 기준으로 100%입니다. 크기가 변하지 않습니다.
.box03 {
margin-left: 100px;
background: #0f0; /*녹색*/
}
auto 는 상대적입니다. margin-left 로 왼쪽에서 줄어든 만큼 크기가 변합니다.
- 빛의 삼원색
color:#fff; /*흰색*/
background: #f00;
background: #ff0;
background: #0f0;
red green blue
Full 0 0
Full Full 0
0 Full 0
- 축약형
margin: 0; // margin(-top, right, bottom, left) 대신에 margin: 0 만을 입력하면 됩니다.
margin: 0; = margin: 0 0 0 0; (상 우 하 좌)
body{
margin: 0 0 0 0;
}
- margin: auto 중요합니다. 가운데로 위치합니다.
- 홈페이지를 만들 때의 표준 사이즈는 1200px 입니다.
.box00{
width: 1200px;
margin: 0 auto;
background: #333;
color:#fff; /*흰색*/
}
박스를 가로 중앙으로 위치하기위해선 magin: 0 auto;
- shortcut
.box01 을입력하면 아래가 자동완성됩니다.
<div class="box01"> </div>
- 중요한 박스 성질 - box-sizing: border-box;
*{
box-sizing: border-box; // 모든 박스 사이즈에서 border와 padding을 width 안쪽으로 밀어넣습니다.
}
.box{
width: 600px;
border: 1px solid #333; // border: 1px 로 solid 스타일로 #333 색상을 부여합니다.
}
border가 더해져 box 사이즈가 600px이 아닌 602px가 되었습니다.
.box02 {
padding: 30px;
background: #f00;
}
padding이 더해져 box 사이즈가 662px가 되었습니다.
- 이 크기 성질을 해결하기 위해서 모든 box에 box-sizing: border-box; 를 지정합니다.
- margin 겹침 현상
.box{
margin:30px auto;
width: 600px;
border: 1px solid #333;
}
margin : 30px; : 설정대로라면 박스마다 margin이 30px이 되어야 합니다.
따라서 박스가 두 개라면 밗 사이의 margin은 위 아래 더해 총 60px이 되어야 합니다.
- 하지만 margin은 아래 위로 겹칩니다.
부모 자식간에도 겹칩니다.
따라서 박스 사이의 margin이 30px이 됩니다.
이 문제로 인해서 margin 사이즈는 한 방향으로만 지정합니다.
- 글자 tag의 성질
<strong class="box box03">Lorem ipsum dolor sit.</strong>
사이즈를 줄 수 없습니다.
아래 위로 margin padding 이 적용이안됩니다.
좌우로 margin padding 은 적용이 됩니다.
기본적인 글자 성질을 지니고 레이아웃을 차지하지 않음에도
padding 자체는 시각적으로 적용됩니다.
글자 속성을 가진 tag 들은 기본적으로 height와 width가 없습니다.
하지만 padding은 적용 '된 것 처럼' 보입니다.
'된 것 처럼' 보인다고 표현 한 이유는 위의 붉은색 block 과 겹쳐지는 모습을 볼 수 있기 때문입니다.
실제로 padding이 다른 block 들과 동일한 방식으로 적용이 되었다면 겹쳐지지 않고 아래로 밀려나야 합니다.
이는 버그로 치부하고 조심해야 하는 부분이 아니라, 경우에 따라 활용을 하면 css 효과를 입히는 것이 용이할 것입니다.
- display : inline, block 성질 바꾸기
박스 성질의 div 를 display: inline 으로 글자성질로 바꾸거나
<div class="box box03">Lorem ipsum dolor sit.</div>
.box03 {
display: inline;
margin: 100px auto;
padding: 100px 30px;
}
글자 성질의 strong 을 display: block 으로 박스성질로 바꿀 수 있습니다.
<strong class="box box03">Lorem ipsum dolor sit.</strong>
.box03 {
display: block;
margin: 100px auto;
padding: 100px 30px;
}
shortcut
Alt + Z 시각적으로 긴 한 줄을 여러줄로 보이게 하기
- reset.css를 만들어 link로 연결합니다.
reset은 최우선 순위로 적용시켜야 합니다.
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/box03.css">
* {
margin: 0;
padding: 0;
font-size: inherit;
font-weight: inherit;
box-sizing: border-box; // 중요합니다.
}
a {
color: inherit;
text-decoration: none;
}
ul,
ol {
list-style: none;
}
body {
line-height: 1; // 중요합니다.
}
display: flex
box를 가로로 배열합니다. auto가 적용됩니다. auto를 통해 사이즈에 맞춰 작아집니다.
.basic01 .container {
display: flex;
gap:30px;
width: 1200px;
margin: 0 auto;
}
- inline-block
img는 기본적으로 inline 속성을 가지고 있습니다.
동시에 block의 성질도 지니고 있어 크기를 지정할 수 있습니다. (이를 display :inline-block 이라고 합니다.)
.basic01 .container img{
width: 100%;
}
- 한 contrainer 안의 서로 다른 사이즈의 이미지를 동일하게 만들 수 있습니다.
.basic01 figure {
flex: 1;
}
모든 .basic01안의 figure 는 이미지 크기가 제각각이어도 flex: 1 에 맞춰 크기가 변합니다.
internet explorer 에서는 적용되지 않습니다.
(옛날 프로젝트에는 적용이 안되기 때문에 문법 문제 등이 발생할 수 있습니다.)
.basic01 {
padding: 100px 0; /*표준사이즈 입니다.*/
background: #f7f7f7;
text-align: center;
}
.basic01 h2 {
font-size: 21px;
font-weight: bold;
margin: 0 0 20px 0;
}
.basic01 p {
font-size: 15px;
margin: 0 0 30px 0;
}
.basic01 .container {
display: flex;
gap:30px;
width: 1200px;
margin: 0 auto;
}
.basic01 .container img{
width: 100%;
}
.basic01 figure {
flex: 1;
}
배운 내용을 바탕으로 웹페이지의 일부를 따라서 만들어 보았습니다.
nav, div, section, ol, li, h1, h2, p 등등의 올바른 쓰임새는 적응이 되려면 시간이 조금 필요할 것 같습니다.
'프론트엔드 국비교육' 카테고리의 다른 글
| 1주차 정리 (05/16 ~ 05/20) (0) | 2022.05.22 |
|---|---|
| 5월20일 5일차 - 마우스이벤트 hover, font, icon (0) | 2022.05.20 |
| 5월19일 4일차 - popup창 구현 (jquery) (0) | 2022.05.19 |
| 5월18일 3일차 - navigation bar (box 강의 semantic tag 기억하기) (0) | 2022.05.18 |
| 5월16일 1일차 - sementic tag, reset css (0) | 2022.05.16 |
