본문 바로가기

웹코딩 배우기293

CSS 투명 이미지 opacity 이미지에 투명도 주기 opacity: 값; opacity 값은 0.0~1.0을 사용한다. 기본값은 1.0 이고 숫자가 작아 질수록 투명해진다. 오호~ 재미난 기능이네. opacity opacity opacity opacity opacity opacity !!! 2020. 1. 10.
CSS 요소 특수 상태 / 마우스 반응 마우스에 반응하는 요소의 특수 상태. 말이 참 어렵다. 공부하면서 가끔 느끼는데 말을 왜이리 어렵게 하나? 라고 느낄 때가 있다. 그러나 그 말을 다르게 표현할 방법은 나도 모르겠음. 그냥 마우스에 반응하는 요소? 정도로 해도 괜찮을 것 같다. 아~몰랑~ 마우스에 반응 한다하면 보통 글자색이나 배경색이 변하거나 뭔가 생겼다가 없어지고 이런거. a:link, visited, hover, active 마우스에 반응하는 요소중 대표적인게 a요소다. a는 링크요소다. ~ link : 링크가 걸린 내용(글)의 색. visited : 방문한 링크의 색. hover : 마우스가 올라갔을 때 링크의 색. active : 마우스를 클릭 했을 때 링크의 색. 참고로 각 태그는 쓰는 순서가 있다. link, visited,.. 2019. 12. 23.
CSS 자식 요소 선택 css를 이용하면 요소 선택에 실수가 없어야한다. class는 '.(점)', id는 '#'을 쓴다. 이거는 기본이고. 만약 div 속에 들어있는 자식 요소를 선택하려면? 다음의 예를 보자. 오늘은 내부 css 스타일로 실습 해본다. div안에 있는 p를 선택하는 방법. 'div공백p' 라고 쓰면된다. 별거 없네 ㅡㅡ?여태 class랑 id만 써봐서 몰랐는데 쉽다.다음 과목으로~ㄱㄱ 2019. 12. 18.
CSS 세로 가운데 정렬 padding 이용 요소의 내용을 세로 가운데 정렬하는 방법을 배워보자. 이번엔 padding값을 이용한다. padding : 0 0 0 0 padding-top: padding-rgiht: padding-bottom: padding-left: 패딩 값은 기본 이렇게 5가지가 있다 아래 4가지는 무시하고 그냥 맨 위에 것만 쓸 줄 알면 된다. 패딩 값 순서 : 상 - 우 - 하 - 좌. 이것만 기억하자. 상우하좌. padding을 이용한 세로 중앙 정렬 2019. 12. 18.
CSS position: absolute; 절대 위치 position: absolute; 는 지난번에 배운 것 같은데? 배웠는지 확인해보니 배웠다. 까먹었네. 지난 글 좀 보고 왔다. 까먹은거 모르는 거다. 다시 한번 해보자. 2019/11/19 - [웹코딩 배우기/· CSS] - CSS position position: absolute; 이 태그는 절대적 위치를 지정한다. 절대적 위치를 지정하기 때문에 다른 요소와 겹치게 나온다. 그럼 z-index를 싸서 어느 요소가 위에 올지 설정하면 된다. 2019/09/17 - [웹코딩 배우기/· 태그 사전] - CSS 태그 : z-index 2019. 12. 16.
CSS 이미지 중앙 정렬 이미지 중앙 정렬은 지난 시간에 공부한 div 중앙 정렬과 쪼매(조금) 다르다. 2019/12/03 - [웹코딩 배우기/· CSS] - CSS 레이아웃 가로 중앙 정렬 이미지 가로 중앙 정렬 실습하자. 딩가딩가~ 오랜만에 css 공부 하니까 재미지다.^^ 이 방법 말고도 중앙 정렬하는 방법은 다양하다. 상위 요소에 text-align: center;를 써도 되고 margin: 0 auto; 등등... 2019. 12. 11.
CSS 레이아웃 가로 중앙 정렬 오랜만에 웹코딩 공부를 한다. 두근두근. 오늘 배운건 요소의 정렬 방법. 이건 스킨 편집하면서 몇 번 해봐서 조금 익숙하다. 그러나 공부하면서 모르는 부분이 이렇게 많았나 했다. 내가 아는 건 언제나 조금. div 가로 중앙 정렬 가로 중앙 정렬은 margin: auto; 를 쓰면 된다. 실습해보자. 위 실습 창의 CSS를 보면 text-aline: center; 가 있다. 이건 요소 안의 내용을 중앙 정렬하는 거다. 요소 자체 중앙 정렬과 요소 안의 내용을 중앙 정렬하는 건 잘 구별하자. 2019. 12. 6.
CSS inline. inline-block. block 차이 display: inline; display: inline-block; display: block; 요소를 나열하는 방법이다. 쩌~~~ 번에 이에 관한 공부를 한적이 있다. 2019/10/15 - [웹코딩 어려워/· HTML] - HTML 블록과 인라인 HTML 블록과 인라인 요소의 표시 방법에는 블록 구조와 인라인 구조가 있다. 이 두 단어는 스킨 편집 할 때 몇 번 들어봤다. - 블록 구조 정의 : 항상 새 줄에서 시작하고 전체 너비를 사용한다. 블록 구조의 태그 address article a.. nilgi.tistory.com 한번 봐주고 다음으로 넘어가는게 좋겠다. 실시간으로 글을 막 쓰기에 보고 다시 글을 쓴다. inline은 가로 나열이다. 요소와 요소 사이에 공간이 없고 css를 보면 알 .. 2019. 12. 4.
CSS 이미지 나란히 나열 .name::after { content: ""; clear: both; display: table; } 이용한 이미지 나란히 나열하기. 이미지 크기는 100%로 해야 반응형이 된다. 지정해주지 않으면 원본 크기로만 보여 영역을 벗어나거나 스크롤이 생긴다. 브라우저 크기를 조정해보면 이미지 크기도 줄어들고 늘어난다. 2019. 11. 30.
CSS 너비가 같은 박스 만들기 box-sizing box-sizing을 이용해서 너비가 같은 박스 상자를 만들어보자. 이거는 저번에 배운 .name::after {content: ""; clear: both; display: table;}을 이용한다. box-sizing은 각 박스의 너비를 넓히는 항목인 padding, border값을 추가하면 상자가 깨질수 있다. 상자 전체 너비나 높이에 padding, border 사용해 상자 안에서 유지되도록 한다. 2019. 11. 29.
CSS float overflow: auto; 대체 저번에 float 배울때 영역안에 배치하는 태그로 overflow: auto;를 사용했다. 근데 현대사회(?) 태그에서는 이것보다 .clearfix::after { content: ""; clear: both; display: table; } 이렇게 쓴다고 한다. 더 어려운데... ㅠㅠ 그리고 난 아직 ::after 배운적 없는데...아... 답답하네 또. display: table도 써본적 없다.아... 진짜 짜증나네 또. 모르니까 일단 해보고만 넘어가자. 외우자. 모를 때는 무작정 외우는게 최고. 2019. 11. 29.

티스토리툴바