전체 글
-
고성 삼포 해수욕장(22.09.03~22.09.04)일상/여행 2022. 9. 4. 18:09
서핑을 하기 위해 고성 삼포 해수욕장을 찾아왔다. 강원도 고성은 내가 약 2년이 넘는 기간 동안 군 생활을 한 곳이지만 군생활을 재밌게 한 나로서 깊은 애착을 갖고 있다. 특히, 천혜의 환경을 자랑하는데 앞으로는 깨끗한 동해바다가 펼쳐지고 뒤로는 멋지고 웅장한 설악산의 울산바위가 마치 지켜주든 든든히 자리를 지켜주고 있다. 군 생활 동안 고성 바다에서 놀아본 적은 한번도 없지만 전역하면 반드시 한번은 시간내서 놀러와보겠다 다짐했던 결심이 이번에 이루어진 것이다. 그것도 버킷리스트 중 하나인 서핑을 하기 위해서. 고성을 가기 위해 일행들과 건대입구역에서 만나 일행 차를 타고 이동했고 이동하는 동안 이전에 서핑을 타본 일행들이 서핑은 파도가 좀 있어야지 재밌게 탈 수 있다는 얘기를 한다. 마침 뉴스에는 현재..
-
border-radius프로그래밍/HTML&CSS 2022. 9. 3. 09:00
border-radius는 박스 모델의 테두리를 둥글게 만드는 방법으로 이 속성을 이용하면 원의 반지름을 이용한 둥근 정도를 표현한다. border-radius: | border-radius: top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y border-radius 속성을 사용하면 이미지를 원 형태로 만들 수 도 있다. 이미지 요소의 너비와 높이를 똑같이 하고 border-radius의 반지름 값을 너비나 높이의 50%로 지정하면 원이 된다. 예를 들어 300px의 박스가 있다고하면 150px이나 50%로 적용하면 원으로 표현된다.
-
테두리(border)프로그래밍/HTML&CSS 2022. 9. 2. 22:18
테두리는 박스 모델의 끝 선상을 가리키며 스타일로 선의 종류, 두께 등을 지정할 수 있다. border-style border-style 속성은 테두리의 스타일을 지정할 때 사용하며, 기본 값은 none으로 속성 값을 따로 지정하지 않으면 테두리 색상이나 두께를 지정하더라도 화면에 표시 되지 않는다. 테두리의 스타일에는 여러 속성값이 있다. 종류 설명 none 태두리가 없음(기본값) hidden 테두리를 감춤 solid 테두리를 실선으로 표시 dotted 테두리를 점선으로 표시 dashed 테두리를 짧은 직선으로 표시 double 테두리를 이중선으로 표시 실선 점선 짧은 직선 이중선 border-width border-width 속성은 테두리의 두께를 지정한다. 속성값을 지정하지 않는다면 테두리가 나타나..
-
블록(block) 요소와 인라인(inline) 요소프로그래밍/HTML&CSS 2022. 9. 1. 22:01
블록 요소 블록 요소는 태그를 사용해 요소를 삽입했을 때 혼자 한 줄 전체를 차지하는 것을 가리킨다. 한 줄을 차지한다는 것은 해당 요소의 너비가 100%라는 뜻으로 따라서 블록 요소 좌 우로는 다른 요소가 올 수 없다. 블록 태그의 특징을 갖고 있는 태그로는 , , 등이 있다. 시간이란.. 내일 죽을 것처럼 오늘을 살고 열원히 살 것 처럼 내일을 꿈꾸어라. 인라인 요소 인라인 요소는 블록요소 달리 한줄 전체를 차지 않는다. 컨텐츠 만큼만 영역을 차지하지 않고 나머지 공간에는 다른 요소가 올 수 있다. 따라서 한 줄에 여러개의 인라인 요소가 올 수 있다. 인라인 요소의 특징을 갖는 태그로는 , , 이 있다. 시간이란.. 내일 죽을 것처럼 오늘을 살고 열원히 살 것 처럼 내일을 꿈꾸어라.
-
박스 모델(box model), 컨텐츠(content) 영역프로그래밍/HTML&CSS 2022. 9. 1. 21:52
CSS 박스 모델은 웹 문서의 내용을 박스 형태로 정의하는 방법을 의미하며 이러한 박스 모델들이 모여 웹 문서를 이루고 박스 모델에는 마진, 패딩, 테두리 등 박스가 여러겹 포함된 형태를 띈다. 박스 모델은 웹 문서의 블록 요소의 특징을 갖는 모든 박스를 박스 모델로 취급하는데, 박스 모델에는 컨텐츠 영역과, 박스 테두리와 컨텐프 영역 사이의 영역인 패딩의 영역과 박스의 테두리, 박스간의 사이 공간인 마진의 영역을 구성되어있다. 이때 마진과 패딩은 웹 문서에서 다른 컨텐츠 사이의 간격이나 배치 등을 고려할 때 필요한 개념이다. 컨텐츠 영역 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분으로 박스 모델에서 컨텐트 영역의 크기를 지정할 때 너비는 width, 높이는 height 속성을 사용한다. 종류 ..
-
배경 관련 스타일프로그래밍/HTML&CSS 2022. 8. 31. 19:28
background-color background-color 속성은 배경색을 지정하려면 배경을 넣고 싶은 요소의 스타일 규칙을 만들 때 사용한다. 배경색 또한 color 속성과 마찬가지로 rgba, 16진수, 색상명 표기법 중 한 가지로 표현 가능하다. background-color: background-color : color: #ffff00 | rgb(0,0,255) | blue 배경색 적용하기 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, a iure vel nostrum est quos? Alias nulla voluptatum laboriosam cumque aspernatur at eos cupiditate consequ..
-
텍스트 관련 스타일프로그래밍/HTML&CSS 2022. 8. 30. 23:10
텍스트 관련 스타일은 글자와 단어, 그리고 글자로 이루어진 문단에서 사용하는 스타일이다. color 웹문서에서 문단이나 제목 등의 텍스트에서 글자색을 바꿀 때는 사용한다. color: color: #ffff00 | rgb(0,0,255) | blue 16진수 표현법과 rgb 표현법, 색생명 표현법으로 표현이 가능하다. 16진수 표현법 : 웹 문서의 CSS에서 색상을 16진수로 표현하는 방법으로 위 코드와 같이 #기호 다음으로 6자리의 16진수로 표시한다. 포토샵 같은 그래픽 프로그램에서 색상을 지정할때 사용하는 가장 기본적인 방법이다. 16진수는 #000000(검은색)부터 #ffffff(흰색)까지 표현 가능하고 만약 색상 값이 두자리씩 중복이 될 경우 #ff0처럼 줄여서 표현이 가능하다. rgb 표현법 ..