일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- 데이터시각화
- 정보처리기사필기
- 요구사항확인
- 딥러닝
- 언리얼학습
- numpy/pandas
- Orange
- 핵심프로젝트
- 파이썬
- 데이터베이스
- 머신러닝
- 자연수의성질
- 코딩테스트
- 정보처리기사실기
- pandas
- 데이터분석
- C++
- 자바 실습
- 디버깅
- 자바
- 언리얼프로젝트
- 선형분류모델
- c언어
- JSP/Servlet
- 텍스트마이닝
- 이수증
- 데이터입출력구현
- 선형회귀모델
- 중학수학
- html/css
- Today
- Total
목록전체 글 (784)
클라이언트/ 서버/ 엔지니어 " 게임 개발자"를 향한 매일의 공부일지
눈이 조금 감기지만 이 내용만 학습하고 취침하려고 한다. 강의도 다 들었고 이제 정리하면서 학습을 진행해보려고 한다. 그래도 공부하는 것이 정말 재미있어졌다. 웹 문서에서 위치나 글씨를 원하는 위치에 넣고 싶은데 생각만큼 쉽지 않다. 이럴 때 position 속성을 사용하면 웹 문서에서 요소의 위치를 자유롭게 정할 수 있다. 1. 웹 요소의 위치를 정하는 left, right, top, bottom 속성position 속성으로 기준 위치를 정한 뒤 요소의 위치를 left, right, top, bottom 속성에서 선택하고 속성값을 지정한다. 텍스트 요소 자유롭게 배치하기 2. 배치 방법을 지정하는 position 속성웹 문서 안의 요소를 자유자재로 배치해주므로 HTML과 CSS를 이용해 ..
이번에는 레이아웃을 만드는 방법에 대해서 학습해보기로 하자. 박스 모델의 블록 레벨 특성과 인라인 레벨 특성을 이해했다면 웹 문서의 레이아웃을 만들 때 도움이 된다. 이전에 충분히 이해하고 넘어갔으니 이 수업도 잘 따라갈 수 있을 거라 기대한다.먼저 강의부터 듣고 정리를 시작해볼 것이다. " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 1. 배치 방법 결정하는 display 속성이 속성을 사용하면 블록 레벨 요소와 인라인 레벨 요소를 서로 바꿔서 사용할 수 있다. 주로 웹 문서의 네비게이션을 만들며서 메뉴 항모을 가로로 배치할 때 많이 사용하고, 이미지를 표 형태로 배치할 수도 있다. 수평 네비게이션 만들기 인라인 요소가 없었을 때는 수직으로 배열된 표였다. 하지만 ..
이제 마진에 대한 학습을 진행해본다. 두 박스 모델 사이의 여백은 마진, 한 박스 모델에서 테두리와 내용 사이의 여백은 패딩이라고 한다. 마진과 패딩은 웹 문서에서 여러가지 요소를 배치할 때 자주 쓰이는 속성이므로 꼭 기억해두어야 한다.바로 학습을 진행해본다. 1. 요소 주변의 여백을 설정하는 margin 속성마진은 요소 주변의 여백을 의미한다. 마진을 이용하면 요소와 요소 사이의 간격을 조절할 수 있다. margin: | | auto margin 속성으로 여백 설정하기 개발자 모드에서 보면 마진값이 잘 들어가 있음을 확인할 수 있다. 2. margin 속성을 사용하여 웹 문서를 가운데 정렬하기margin 속성을 사용해 웹 문서의 내용을 화면 중앙에 배치하려면 우선적으로 배치할 요소의 내..
이제 테두리 스타일에 대한 내용을 학습해보기로 하자. 박스 모델을 사용해 웹 문서에 요소를 배치하려면 각 박스 모델의 크기와 여백, 테두리 스타일 등을 고려해야 한다. 특히 테두리 스타일은 선의 모양뿐 아니라 두께와 색상도 지정할 수 있다. 그리고 네 방향 모두 같은 테두리를 사용할 수도 있고 각각 다르게 지정할 수도 있다. 이 수업을 마치면 얼마나 많은 것들을 알 수 있을지 기대가 된다. " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 1. 박스 모델의 방향 살펴보기 박스 모델 방향은 맨 윗부분부터 top, right, bottom, left 순으로 돌아간다. 2. 테두리 스타일을 지정하는 border-style 속성이 속성의 기본값은 none이므로 속성값을..
아침 10시 반 부터 오후 6시까지 한 단원 학습을 마치고 이제 두번째 단원에 들어간다. 박스 모델도 공부할 게 참 많은데 오늘 저녁까지 여기는 다 마치고 싶다. 그럼 바로 학습에 들어가보자! 웹 문서에서 내용을 배치할 때는 각 요소를 박스 형태로 구성한다. 이것을 'CSS 박스 모델' 이라고 한다. 각 박스 모델은 셀제 내용이 들어가는 콘텐츠 영역과 테두리, 여백으로 구성된다. 1. 블록 레벨 요소와 인라인 레벨 요소 박스 모델은 블록 레벨 요소인지 인라인 레벨 요소인지에 따라 나열 방법이 달라진다. ◆ 블록 요소 : 요소를 삽입했을 때 혼자 한 줄을 차지하는 것◆ 인라인 레벨 요소 : 콘텐츠 만큼 영역을 차지하고 나머지 공간에 다른 요소가 올 수 있음블록 레벨 요소 사용하기 인라인 레벨 ..
7장을 마치고 단원을 정리하며 연습문제를 푸는 일만 남아있다. 이 시간이 가장 기대가 되면서도 즐겁다. 얼마나 배우고 실력이 향상되었는지 점검할 수 있는 시간이기 때문이다.문제다 다른 단원에 비해 2배나 많지만 무척 재미있을 것 같다. 그럼 바로 시작해보자. 단원 한눈에 정리하기 연습문제 풀기 문제 1번 이렇게 불릿도 제거하고 색깔과 줄 간격도 변경해주었다. 문제 2번 이젠 글씨가 잘 보인다. 이 문제도 어렵지 않게 잘 풀었다. 문제 3번 조금 어려운 문제였는데 정말 잘 풀었다. 이렇게 문제를 스스로 해결하는 기쁨을 말도 다 할 수 없다. 마지막 문제만이 남아있다. 이 문제도 충분히 잘 풀 수 있을 것이다! 문제 4번 마지막 문제는..
드디어 1주차 학습을 마쳤다. 한 달도 더 전에 HTML 부분을 공부하다 말았고, 어제와 오늘에 걸쳐 1주차의 모든 내용을 마쳤다. 정말 배울 게 많은 알찬 수업이었다. 그럼 단원 정리를 하며 마무리를 해볼 것이다. 단원 정리하기 학습을 마치고 단원 정리도 분량이 만만치 않다. 1주차 학습 내용은 무려 32개나 되지만 이 모든 것을 다 마쳤다는 것이 뿌듯하고 기쁘다. 여기까지 배운 것 중 관련있는 내용의 수업 자료들을 추가적으로 학습하고 책에 나온 연습문제도 풀어보는 시간을 갖고자 한다. 요즘에는 학습일지를 짧게 쓰는 편이다. 이 시간도 아껴서 공부에 투자하고 싶기 때문이다.
이제 1주차의 마지막 학습이 될 것 같다. 이 내용은 강의가 조금 긴데 책을 먼저 학습할지 고민이 되었다. 어제 온라인 학습을 먼저 진행하다 책으로 학습을 먼저 하는 것이 좋을 것 같아 이후에 진행해본다. 여기서는 CSS의 기본 속성에 대해서 학습하게 된다. 이론 9 - CSS 주요 속성 특정 영역의 공간을 설정할 때 사용한다. 고정값이 px이고 가변값을 %로 표현한다. 여러 개의 폰트를 쓰는 것이 좋다. 굵기는 100 단위로 올라가며 사용한다. 작성 순서는 상관 없다. 실습 10 - CSS 주요 속성 1 기본 내용 실습해보기 배경과 글자색 변경하기 체크박스를 해제하면 해체된 결과값을 화면으로 확인할 수 있다. 하지만 이는 브라우저 상에서만 적용된다. ..
이제 7장의 마지막 이론 학습이 남아있다. 점심을 먹을 때도 지나서 배도 무척 고프지만 조금이라도 학습을 진행해보려고 한다. 강의에 좀 집중이 되지 않아서 대충 들어서 다시 들어야 할 것 같다.웹 사이트에서 자주 등장하는 메뉴 항목은 대부분 목록과 링크를 결합하여 만든다. 여기에 CSS를 적용하면 훨씬 멋진 사이트 메뉴가 되는 것이다. 이제 목록을 만드는 스타일 속성을 알아보기로 하자. 1. 목록 스타일 블릿 모양과 번호 스타일을 지정하는 list-style-type 속성순서 없는 목록의 경우 목록 앞에 다양한 블릿 모양을 넣을 수 있고, 순서 목록에서는 번호 스타일을 지정할 수 있다. 순서 없는 목록과 알파벳 대문자 목록 지정하기 원래는 불릿이 있었으나 없앴고, 두번째 단락에서는 1, 2..
이어서 컬러 속성에 대해서 학습을 진행해본다. 앞서 색을 지정하는 4가지 방식에 대해서 배울 수 있었다. 이 내용은 CSS뿐 아니라 포토샵이나 다른 작업을 할 때도 필요하니 잘 숙지하기로 하자. " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 2. 텍스트를 정렬하는 text-align 속성 왼쪽 · 오른쪽 · 양쪽 · 가운데 정렬 등을 사용할 수 있다. 텍스트 정렬하기 정렬 방법을 지정하지 않을 경우 왼쪽 정렬이 기본이다. 왼쪽 정렬에서는 오른쪽에 여백이 생기지만, 양쪽 정렬에서는 여백이 생기지 않는다는 차이가 있다. 3. 줄 간격을 조절하는 line-height 속성줄 간격을 원하는 만큼 조절할 수 있다. 줄 간격 24px로 지정하기p { font-size: 1..