목록Web (46)
Minwoo Dev.
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/rmFvg/btsBQoLBFYc/WW7kdk9lMpJ74RNiMw5Os1/img.png)
CSS에서는 HTML 요소를 지정하여 스타일을 설정한다. CSS에서 요소를 선택하는 방법에는 크게 세 가지가 있다. 태그 이름을 사용하여 지정 id 선택자를 사용하여 지정(#name) class 를 사용하여 지정 (.name) 태그 이름을 사용하여 지정하는 방법 저녁메뉴 후보 짜장면 라면 김치볶음밥 규동 위와 같은 HTML 코드에서, style 요소는 HTML 문서를 꾸며주는 CSS 이다. li{ color : blue; } 위 부분은 이 HTML 문서에서 li 요소 전체에 대하여 색상을 blue로 설정한다는 뜻이다. 결과 이처럼 CSS에서는 HTML 태그 이름을 통하여 속성을 지정할 수 있다. 하지만 태그 이름을 사용하여 속성을 지정한다면 원치 않는 부분까지 속성이 지정된다는 단점이 있다. 예를 들어,..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/dZyqps/btsBCvYDzvX/p9zR2BA2jytOt3LhDpryEk/img.png)
글의 양이 많을 경우에 ... 을 사용하여 생략하여 나타내는 경우가 있다. 예를 들면 코끼리는 코가 손이다. ↓ 코끼리는 ... 위와 같은 방식으로 말이다. 이런 표현방식을 HTML/CSS에서도 할 수 있다. text-overflow text-overflow는 white-space를 이용해 줄바꿈을 하지 않는 경우에 넘치는 텍스트를 어떻게 처리할 지 설정한다. 속성값에는 clip과 ellipsis가 있다. clip clip 속성값은 넘치는 텍스트를 잘라버린다. ellipsis ellipsis 속성값은 ... 과 같은 말 줄임표로 잘린 텍스트를 대체한다. index.html 현지시각으로 8일 워싱턴포스트, 뉴욕타임스 등 주요 외신에 따르면 유럽연합 집행위원회(EC)와 유럽의회, EU 27개 회원국 대표는 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/b9lCIy/btsGhUxXeRY/oeKjt8te3K9imgs7MQWK4k/img.png)
display는 요소를 표현하는 방식에 대한 속성이다. block 기본적으로 가로 영역을 모두 채운다. width, height 속성을 지정하여 영역 크기를 조절할 수 있다. 기본적으로 display 속성값이 block에 해당되는 태그에는 , , , 태그가 있다. Hi안녕!Bye 블록 방식에서는 가로 영역을 모두 채우기 때문에 아래와 같은 형식으로 나타난다. 결과 inline 가로 영역을 가득 채우지 않기 때문에 줄바꿈이 되지 않는다. width와 height를 지정할 수 없다. inline 요소를 두 개 사용하면 줄바꿈되지 않고 바로 오른쪽에 표시된다. Hi안녕!Bye 결과를 보면 줄바꿈이 일어나지 않고 수평 방향으로 쭉 이어진 것을 확인할 수 있다. 결과 inline-block inline 방식이 w..
웹 사이트 클론 코딩을 공부하면서 웹페이지의 신기한 문법을 발견했다. sytle 시트에 ::before, ::after 이라고 적혀있는 것을 확인했는데, 다른 CSS 코드와는 조금 다른 모습이었기 때문에 궁금해서 알아보았다. 가상 요소(Pseudo-elements) CSS에서 기본적으로 스타일을 적용하면 선택ㅋ한 요소에 대하여 스타일을 적용한다. 따라서 그 모든 요소의 스타일을 변경하는 것이다. 하지만 가상 요소(Pseudo-elements)는 선택한 요소의 일부분에만 스타일을 적용할 수 있다. 가상 요소의 종류 ::before 요소의 시작부분에 콘텐츠를 추가한다. ::after 요소의 끝부분에 콘텐츠를 추가한다. ::first-line 요소의 텍스트에서 첫 줄에 스타일을 적용한다. ::first-let..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/GDVPH/btsAx0R1xIs/QTuWbiQTIpAsGdpie9kn8K/img.png)
웹 개발을 하려면 HTML과 CSS는 뗄래야 뗄 수 없는 끈끈한 관계라는 것을 알 것이다. 개발은 직접 무언가를 만들어보면서 공부하는 것이 제일 좋기 때문에, CSS를 깊게 들여다보지 않고 필요한 만큼만 간단하게 설명하려고 한다. CSS의 ruleset css의 코드들은 위와 같은 ruleset들으로 이루어져 있다. p는 selector(선택자)라고 하며, h1, h2, p 등등 여러가지 항목을 바꿔적어주면 그 항목에 대하여 설정할 수 있다. color 과 text-align 은 Property(속성)으로, 선택자의 속성을 바꿀 때 사용한다. Value(속성 값)은 선택자의 값을 원하는 값으로 바꿀 때 사용한다. 위와 같은 형식은 기본이므로 생략하면 안된다. 중괄호({}), 콜론(:), 세미콜론(;)의 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/Jq8Fc/btsA8KUpyJ6/Q6AQvZVp4x9KcnD0c0s3xK/img.png)
object-fit 개인적으로 생각하기에 이미지의 크기를 조절하는 가장 간편한 방법이다. 혹으 같은 요소를 컨테이너의 사이즈에 맞춰서 조정할 수 있다. 아래 예시를 보자. 위 코드들 중 img 의 css 속성을 들여다 보자. img{ width: 100px; height: 100px; object-fit: cover; } 우리가 입력한 img 태그에 속성을 이렇게 간단하게 입력하면 된다. width : 100px - 너비를 100픽셀로 설정 height : 100px - 높이를 100픽셀로 설정 object-fit : cover - 가로세로 비율을 유지한 채로 사이즈가 조절됨 object-fit 속성값별 차이 fill : 사이즈를 채우기 위해 이미지 크기가 늘어나거나 찌그러질 수 있다. contain :..
position : absolute 첫번째 방법은 이미지를 컨테이너로 감싸고, 컨테이너에서 넘치는 부분은 잘라내는 방식이다. div 태그로 감싼 img 요소의 style에 position : absoulte를 추가한다. 요소를 보자. 내부의 img 태그에서 우리가 불러올 이미지를 불러오는 것을 알 수 있다. 그리고 그 img 요소를 div 태그로 감싼다. 요소에서 div 태그인 container class에 속성들을 부여한다. 각 속성별 의미는 아래와 같다. CSS 속성 width : 100px - 컨테이너의 너비를 100px로 설정한다. height : 100px - 컨테이너의 높이를 100px로 설정한다. overflow : hidden - 컨테이너 밖으로 튀어나오는 이미지를 가린다. (안보이게 한다..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/daqlnV/btsAUm0ztaU/9ovNTcmlJ8knXxCzcGx6a0/img.png)
HTML로 작성한 내용을 CSS로 설정할 때, 왼쪽 혹은 가운데 혹은 오른쪽으로 글자를 정렬하려면 text-align을 사용한다. text-align 사용 예 p{ text-align: center; } 위 코드는 text-align을 사용하여 p 요소들을 가운데(중앙)정렬한 것이다. center 외에도 text-align의 속성은 아래와 같이 다양하다. start : 글자가 왼쪽에서 오른쪽으로 작성된 문서일 때, left 속성과 같다. 한마디로 왼쪽 정렬과 같다. 남극에 있는 세계에서 가장 큰 빙산 'A23a'가 3년 전부터 이동하기 시작, 최근 몇 달 간 가속도를 붙인 것으로 관측됐다. 24일(현지시간) 영국 BBC 방송 보도에 따르면 지난 1986년 남극 대륙 해안에서 떨어져 나와 만들어진 이 빙산..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bNGnuS/btsAORGWBOj/hAUBmi1PXukKUrowQCuk81/img.png)
html/css를 입문하고 보면 id와 class가 굉장히 많이 사용되어 있는 것을 볼 수 있다. 그럴 때 id와 class의 사용 방식에 대한 기준이 없어서 초보자들이 어려움을 겪을 것이라 생각한다. ID (특정 요소에 이름을 붙이는 데 사용) 태그에 유일한 이름을 붙이고 싶을 때 사용한다. 전체 페이지에서 단 하나의 요소만 지정할 수 있다. 중복이 불가능하다. CSS에서 사용할 떄 # 기호를 붙이고 사용한다. 유일하고 특별하기 때문에 CSS에서 클래스보다 우선적으로 적용된다. Class (스타일의 분류에 사용) 같은 유형으로 반복되는 태그들을 유형별로 분류하고 싶을 때 사용한다. 여러 번 반복해서 사용할 수 있다. 반복적으로 쓰이는 유형들을 동일한 class로 나누어 관리할 수 있다. 유형별로 동일한..
HTML 문서를 CSS로 편집할 때, 생각보다 웹사이트 페이지들이 가로로 배열된 것이 많다는 것을 알 수 있다. 기본적으로 리스트는 세로로 정렬된다. 이것을 가로로 정렬하는 법에 대하여 알아보겠다. float 첫번째 방법은 float를 사용하는 것이다. 1 2 3 4 5 위와 같은 HTML 코드가 있다. unordered list로 1,2,3,4,5를 화면에 표시하는 코드이다. ul 태그는 세로로 값을 나열하므로 분명히 세로로 정렬될 것이다. HTML 삽입 미리보기할 수 없는 소스 위처럼 말이다. 하지만 위 코드의 ul 요소를 가로로 정렬하게 만드려면, 태그의 ul 요소에 float를 추가해주면 된다. 1 2 3 4 5 float : left; 는 왼쪽부터 정렬한다는 뜻이므로 각 div요소 값 하나하나 ..