하루 8강이 생각보다 분량이 적고 어려워서 이해하기 힘든 부분을 배우는 구간이 아니라 오늘도 뭔가 이게 끝인가....? 싶은 심정으로 강의를 들었다.
어제 마지막 강의로 들은 html은 생각보다 별게 없었다. 외울 필요없이 익숙해지라는 말씀은 효율적으로 공부하는데 제법 도움이 되었지만 기억력이 심각하게 딸리는 탓에 강의를 계속 반복듣기를 안 하려면 적긴 해야해서 내 편한대로 필기를 하면서 강의를 듣기로 했다.
아래에 오늘 배운 것들을 내 나름대로 정리해본다.
"html은 뼈대 css는 꾸미기"
-무언가를 꾸미기 위해서는 이름을 먼저 붙여줘야함(class) -> 그래야 대상을 가리킬 수 있음
-뭐가 있는지 굳이 외울 필요 없이 필요할 때마다 그 때 그 때 찾아 쓰는 것이 효율적
-css는 부모자식의 관계가 있어 부모 쪽에 적용되면 자식들에게도 모두 적용된다
-단, 자식 쪽에서 개별적으로 정의가 되면 그 정의를 따라감
<div class="mytitle"></div>body에 위와 같은 코드가 있을 때, head에는
<style>
.mytitle{
}
</style>스타일 태그 안에 저 div를 가리키는 .mytitle이 존재하며 저 div 안의 모든 내용들은 각 태그들의 개별 정의가 없을 시 .mytitle안에 정의된 css코드를 따른다.
div태크는 눈에 보이지 않기 때문에 처음 사용할 때 backround-color를 사용해 색을 입혀주고 사용하는게 편하다.
사진 이미지를 div 안에 가져와 백그라운드 배경으로 사용할 때,
<style>
.mytitle{
background-image: url("사진 이미지 url"); /*사진 이미지*/
background-size: cover; /*사진의 사이즈를 조정하고*/
backgound-position: center; /*가운데로 가져온다*/
}
</style>위 3가지는 한 몸이라고 생각하는게 좋다.
background-image에서 url 앞에 linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 를 넣으면 사진 이미지를 어둡게 만들 수 있다.
또한 div의 내용물을 가운데로 정렬할 때,
<style>
.mytitle{
display: flex;
flex-direction: column; /*대부분 column(위아래 정렬), row(오른쪽왼쪽 정렬)만 바꿔쓰고*/
justify-content: center;
align-items: center; /*나머지는 거의 고정이다*/
}
</style>위 4가지를 한 몸으로 생각하여 사용한다.
그 외에
<style>
.mytitle{
border-radius: 10px;/*각진 div의 끄트머리를 둥글게 한다. px이 클수록 원에 가까워짐*/
text-align: center; /*가운데로 줄맞춤을 한다.*/
margin: auto;
/*그냥 div만 쓰면 가로가 꽉 차있기 때문에 이동하지 않는다. div의 가로길이를 줄여줘야 중앙으로 이동함.
바깥 여백을 설정한다.*/
background-color: transparent; /*배경색을 투명하게 바꾼다. 아래에 깔린색이 올라옴*/
color: blue; /*.mytitle가 가리키는 태그 안의 글자색을 파란색으로 바꾼다.*/
border : 10px solid white; /*선굵기 선모양 선색*/
}
.mytitle > button{
/*mytitle 안에 있는 button 태그를 꾸미는 내용이 들어간다.*/
}
.mytitle > button:hover{
/*mytitle가 가리키는 태그 안의 button위에 마우스를 옮겼을 때 버튼의 변화를 설정*/
}
</style>같은 것들을 배웠다.
그리고 또 폰트를 적용할 때는
https://fonts.google.com/?subset=korean
에서 원하는 폰트를 선택해 링크를 복사해서 title 태그 밑에 복사한 후,
<style>
*{
/*폰트 css코드 복사해서 붙여넣기*/
}
</style>같이 쓸 수 있다는 것도 알았다. *은 전체를 가리키는 거라고 한다.
주석의 경우에는 html, css, JavaScript 모두 표시가 달라 파이참에서는 ctrl+/를 쓰면 된다고 한다. 다른 프로그램에서도 적용되는지는 찾아봐야할 듯
파일분리
-style 태그 안의 내용이 길어질 경우 css 파일을 따로 만들어 분리를 할 수 있다.
<Link rel="stylesheet" type="text/css" href="css파일명.css">을 하면 css파일을 불러올 수 있다.
부트스트럽(css꾸러미)
-예쁜 css를 모아둔 것, 만들 줄 안다고 예쁘게 할 줄 아는 것이 아니기 때문
-내 지식을 이용하여 먼저 만든 후 적재적소에 사용하면 완성도가 높아진다.
https://getbootstrap.com/docs/5.0/components/buttons/
에서 필요할 때마다 찾아보면 된다.
적어보니 생각보다 분량이 많은 것 같기도 하다. 내가 배운 걸 다시 한 번 정리하는 습관은 거의 들여보질 않아서 글이 뒤죽박죽인 느낌도 든다. 차차 나아지겠지.
그리고 다른 앱개발 강의에서 JavaScript를 가볍게 배웠는데 정리를 하려니 살짝 뇌정지가 와서 내일 다시 한 번 들어보고 정리해서 올려야할 것 같다. 마침 웹개발 강의에서도 그 부분을 배우는데까지 왔다!
