본문 바로가기

모아보기129

CSS 박스 모델1 | content 콘텐츠 border 보더 padding 패딩 margin 마진 CSS 박스 모델 | content 콘텐츠 border 보더 padding 패딩 margin 마진 오늘은 content 콘텐츠, border 보더, padding 패딩, margin 마진의 개념을 확실히 잡아 보도록 하겠습니다.위 네 가지 개념은 CSS 디자인에 매우 중요한 요소이므로 꼭 정확히 이해하고 넘어가시기 바랍니다. 위 개념들을 확실히 잘 알아야 이미지 및 콘텐츠들을 내가 원하는 위치에 정확히 배치할 수 있기 때문입니다. CSS에서 너비나 마진, 패딩 등을 이용해 크기나 위치를 지정하려면 그 대상이 블록 요소여야 합니다. 블록 요소는 한 줄 전체를 차지하면서 네모난 박스 모양으로 자신만의 영역을 만들기 때문입니다. 우리는 이 네모난 영역을 '박스 모델'이라고 부르고, CSS로 이 박스 모델들을 .. 2020. 12. 23.
무료 퍼즐 게임 | 컬러타일 | 중독성 강한 플래시 게임! 무료 퍼즐 게임 | 컬러타일 | 중독성 강한 플래시 게임! 오늘은 중독성 강한 게임을 소개해드려 합니다. 저는 대학생 때 이 게임을 접하고 여러 번 밤잠을 설쳤던 기억이 있습니다. 한판만더, 한판만더 하면서 계속하게 되는 게임입니다. 조금만 더 하면 깰 수 있을 것 같은데 그게 잘 안되서 계속 도전하게 되는 게임입니다. 게임 이름은 '컬러타일'입니다. 일본어로 쓰여있는걸 보니 일본에서 만든 게임인 모양이네요. 그러나 일본어를 몰라도 상관없습니다. 게임 규칙은 무척 간단하고, 제가 또 설명드리겠습니다. 그리고 구글 번역기를 돌리면 깔끔하게 한국어로 번역을 할 수도 있습니다. 플래시 게임이기 때문에 따로 설치도 필요없습니다. 복잡한 머릿속을 게임으로 깨끗이 지워버리고 싶은 때! 아무 생각 없이 할 수 있는 .. 2020. 12. 21.
CSS background 배경 관련 스타일(background-position) background-position - background-position 속성을 사용하면 배경 이미지의 위치를 지정해줄 수 있습니다. - 기본형은 아래와 같습니다. - 선택자 {background-position : 수평위치 수직위치; } - 수평위치와 수직위치는 세 가지 방법으로 입력해줄 수 있습니다. - [키워드, 백분율, 길이]로 입력해줄 수 있습니다. - 첫 번째 방법은 키워드로 입력하는 방법입니다. - 키워드로 입력할 때 수평위치(↔)는 left, center, right 중 하나를 입력할 수 있습니다. - 키워드로 입력할 때 수직위치(↕)는 top, center, right 중 하나를 입력할 수 있습니다. - 만약 속성값을 하나만 입력하면, 입력 값을 자동으로 수평위치로 인식합니다. 수직위치.. 2020. 12. 19.
CSS background 배경 관련 스타일(background-size) CSS background 배경 관련 스타일(background-size) 오늘은 배경 이미지의 크기를 조절하는 방법을 알아보겠습니다. background-size - background-size 속성을 사용하면 배경 이미지 크기를 조절해줄 수 있습니다. - 기본형은 아래와 같습니다. - 선택자 { background-size : 속성값; } - 속성값으로 auto, contain, cover, 크기값(px 등), 백분율(%)이 들어갈 수 있습니다. - 위 예시는 div 태그 안쪽에 배경 이미지를 설정하고 있습니다. - div 태그의 크기는 브라우저 화면의 크기로 하였습니다. - 배경 이미지는 반복을 하지 않도록 설정하였습니다. - 속성값 auto는 원래 배경 이미지 크기만큼 표시됩니다. - 따라서 위에.. 2020. 12. 17.
PC 메모장 | 스티키 노트 | 포스트잇 | 무료O 설치X PC 메모장 | 스티키 노트 | 포스티잇 | 무료O 설치X 여러분은 꼭 기억해야 하는 것이 있다면 어떻게 하나요? 수첩을 꺼내 메모를 하시나요? 아니면 달력에 메모를 해두시나요? 저는 간단한 컴퓨터 메모 프로그램을 사용합니다. 이 메모 프로그램은 설치도 필요 없고, 로그인도 필요 없고, 정말 단순하고, 자동으로 저장이 되어 매우 유용합니다. 특히 기억해야할 것이 많을 때, 바탕화면에 포스트잇을 붙여놓은 것처럼 이 메모를 띄워두면 빈틈없이 일을 처리할 수 있습니다! 오늘 소개할 메모 프로그램의 이름은 'sticky notes 스티키 노트(스티커 메모)'입니다. 스티키 노트는 윈도우7부터 기본으로 포함된 메모 프로그램입니다(물론 '메모장'과는 다릅니다). 하지만 많은 사람들이 이 유용한 프로그램을 잘 모르고.. 2020. 12. 15.
CSS background 배경 관련 스타일(background-image, background-repeat) CSS background 배경 관련 스타일(background-image, background-repeat) background-image - background-image 속성을 사용하면 배경에 이미지를 넣어줄 수 있습니다. - 기본형은 아래와 같습니다. - 선택자 { background-image: url(파일 경로); } - 파일 경로는 상대 경로와 절대 경로로 지정해줄 수 있습니다. - 상대 경로란 index파일을 기준으로 지정하는 방법입니다. 자세한 내용은 아래를 참고해주세요. 2020/10/11 - [홈페이지 만들기/1단계. HTML] - HTML 이미지(img) 태그: 태그와 경로 설정(src / ..) - 절대 경로란 'http://'로 시작하는 경로를 말합니다. - 절대 경로를 지정하면.. 2020. 12. 13.
반응형

티스토리툴바