클라이언트/ 서버/ 엔지니어 "게임 개발자"를 향한 매일의 공부일지

배경 이미지는 웹 쇼소에 이미지를 넣거나 목록의 불릿 이미지를 대신하여 아이콘과 같은 이미지를 넣을 때도 사용한다. 배경 이미지를 넣는 여러 속성에 대해서 학습해 보기로 하자.     1. 웹 요소에 배경 이미지를 넣는 background-image 속성웹 요소에 배경 이미지를 넣을 때 가장 기본으로 알아 둘 속성은 background-image이다. url()에 이미지 파일 경로를 넣어서 사용한다.background-image: url('이미지 파일 경로') 이미지 파일은 jpg, gif, png 형식을 사용하며 파일 경로에는 작은 따옴표나 큰따옴표를 붙인다. 파일 경로는 현재 웹 문서를 기준으로 상대 경로를 지정할 수도 있고 http://로 시작하는 절대 경로를 사용할 수도 있다.배경을 넣을 때 요소..

이제 새로운 단원 학습에 들어갔다. 공부할 시간이 1시간 반밖에 남지 않아서 정말 아쉽지만 그래도 할 수 있는 데까지 해볼 것이다. 9장까지는 모두 학습을 마치고 오늘 수업에 나가려고 한다.웹 문서에는 내용 전체뿐만 아니라 특정 부분이나 글자 등 여러 요소에 배경을 넣을 수 있다.      1. 배경색을 지정하는 background-color 속성배경색을 지정하려면 배경을 넣고 싶은 요소의 스타일 규칙을 만들 때 background-color 속성을 사용한다. 이 속성은 앞에서 설명한 16진수나 rgb값, 색생 이름을 사용해서 지정한다.background-color: #008000;background-color: rgb(0,128,0);background-color: green;  태그 선택자에서 지정하..

드디어 이 단원을 마치고 연습문제를 풀어볼 때가 되었다. 여기까지 오는데 3일은 걸린 것 같다. 양이 많지 않다고 생각했는데 내용이 지금까지 배운 것 중 가장 어려웠다. 이젠 갈수록 더 어려워지겠지. 그래도 조금씩 실력이 쌓이는 거니 좋은 현상이다.이번 단원의 연습문제는 3문제이다. 그럼 시작해보자!   단원 한눈에 정리하기             연습문제 풀기 문제 1번      틀린 코드 이상하게도 원이 이미자 바깥쪽으로 생기고 그림자도 뭔가 이상하다. 이 문제는 혼자서 해결하기 힘들어서 정답을 참고해보았다.    다시 풀어보기 이렇게 이미지 안에 테두리도 그림자 효과도 잘 생겼다. img라는 공간 안에 속성을 넣어주자 잘 되었다.    문제 2번    틀린 코드  우여곡절 끝에 여기까지는 문제를 풀었..

며칠 전에 CSS 속성과 관련된 내용인줄 알고 정리했는데 CSS 박스 모델 관련 내용이었다. 이에 대한 학습을 진행하고 나서 다시 학습일지를 써보는 중이다. 어쩐지 무슨 말인지 하나도 모르겠더니..  1. 디스플레이     이 부분을 학습하지 않아서 다음날 추가해보았다. 인라인과 블럭 요소를 확인해볼 수 있는 실습이다.   2. 마진 실습   이걸 혼자서 만들어보라고 했을 때는 하지 못했다. 마진이 무엇인지 어떤 원리로 만들어지는지 알고 있어야 한다. 마진의 중첩 원리를 사용해 네모 박스를 만들어본 것이다.    3. 테두리 실습 이 부분은 radian 속성을 사용해 테두리를 깍어서 모양을 내보았다. 50%를 하면 네모가 원이 된다.   학습을 마치고border에 이런 속성이 있다는 걸 알게 되었다. 지..

어제까지 해서 2주 차 학습을 모두 마쳤다. 어제는 너무 졸려서 단원은 마무리하지 못해서 다음날 정리해 보는 중이다. 이것과 함께 책에 나온 연습문제만 풀어보면 이 단원은 마치게 된다.    단원 마무리하기                 학습을 마치고정말 많이 어려운 단원이었지만 다 마치고 나니 후련하다. 이제 연습문제를 풀어보는 시간을 갖기로 하자.

다음으로는 쇼핑몰의 본문을 꾸며보기로 하자. 이 부분을 만들면 진짜 웹사이트처럼 보이는 것 같다.    실습 8 - 쇼핑몰 본문 영역 만들기    설명 들으며 하나씩 해결해보기이전에 작성했던 코드는 index.html에 들어있다. 1. 현재 코드 확인하며 살펴보기  article에 이미지와 타이틀 정보가 들어가있다.   2. index.css 파일을 열고 #main article 속성과 색상 코드 작성하기 이 부분까지가 지난번에 작성한 내용이고 그 다음 내용이 이번에 새로 작성한 부분이 된다.    각각의 article에 float left를 적용했다. 강사님이 설명하시는 내용이 많았지만 요즘 들어서는 무슨 말인지 잘 알아듣지 못하는 것들이 참 많다. 아마도 이 웹 사이트를 만드는 것부터인 것도 같고....

2주 차 수업의 마지막만을 남겨놓고 있다. 오늘 8교시 자율학습 시간에 이 부분을 진행하려고 했는데 파이썬 수업이 계속 있었다. 저녁을 먹기 전에 잠시 공부를 하려고 한다.이번에는 쇼핑몰을 만드는 이론과 실습이 진행된다.    이론 5 - 쇼핑몰 만들기 이런 식으로 쇼핑몰을 제작하게 될 것이다.    실습 7 - 쇼핑몰 상단 영역 만들기    기본 학습 실습해 보기 1. 현재 만들어진 영역 살펴보기     2. 마진과 패딩 넣고 텍스트 기본값으로 초기화모든 html 태그에 마진과 패딩을 넣어준다. a 태그는 기본적으로 색이 파란색이고 밑줄이 들어가 있는 css이다. 이 설정을 초기화시킨다.     3. ol, u의 불렛 설정 해지지금은 불렛이 없는 것처럼 보이지만 마진값이 0이기 때문이다. 이 설정을 제..

이번 단원에서 가장 중요한 부분이 될 것 같다. 강의 영상도 꽤 길지만 차근차근 학습하다 보면 어느새 마쳐있을 것 같다. 이 부분까지만 공부하고 이제 인사교에 갈 준비를 하려고 한다.     이론 4 - 레이아웃에 영향을 미치는 속성 원래의 성격을 바꾸고 싶을 때 사용한다. inline-block은 공간의 크기와 상하배치 작업도 동시에 하고 싶을 때 사용한다.     왼쪽이나 오른쪽에서부터 정렬하고 싶을 때 사용한다.      float left와 right가 양 끝에 정렬된다.           clear는 float을 마지막으로 사용한 지점에 넣어준다. both는 왼쪽 오른쪽 양쪽에 대한 기능을 꺼주는 의미이다.      설정하지 않았는데도 미세한 공백이 생기는 이유는 원래 html 태그에 패딩값을 ..

마진 병합 현상에 대해서 학습해 보기로 하자.    이론 3 - 마진 병합 현상  box2는 bottom이 아니라 margin-top이다. 상식적으로 생각할 때는 250이 될 것 같지만 150으로 설정된다. 큰 값이 작은 값을 병합시키기 때문이다.         웹 사이트를 제작할 때 가장 많이 마주치는 문제이기도 하다.    실습 3 - 마진 병합 현상     기본 학습 실습해보기 1. 형제지간 마진병합 현상 동급인 관계가 형성되고 있다.   2. 형제 지간의 마진 병합 적용하기겹친 부분에 병합되어 마진이 적용된 것을 볼 수 있다. 큰 값인 150px로 적용되었다. 동일하다면 같은 값을 기준으로 병합된다.   3. 부모 자식 간의 마진 병합 현상앞에서 살펴본 코드는 주석 처리를 하고 main과 arti..

블록과 인라인 요소에 대해서도 이론부터 학습을 진행해 보기로 하자.    이론 2 - Block 요소와 Inline 요소      블록 요소에는 p, head, div, h1~h6까지 등이 존재한다.     대표적으로 , 태그가 존재한다. 상하 배치 작업을 사용할 수 없다.    실습 2 - Block 요소와 Inline 요소    기본 학습 실습해보기 1. 블록과 인라인의 차이점 알아보기 블록은 세로로, 인라인은 가로로 배치됨을 알 수 있다.   2. p 태그와 a 태그의 차이점 각 성격별로 다르게 적용이 되었다.   3. 상하배치 작업 알아보기 블록 요소는 마진이 적용되었지만 인라인에는 적용이 되지 않았다. 즉 인라인은 상하 배치 작업이 불가능하다는 것을 알 수 있다. 좌우는 가능하다.내가 사용하는..