css (20) 썸네일형 리스트형 [CSS] css 초기화 파일 방법 방법 1. Css 초기화 파일 공유 사이트https://cdnjs.com/libraries?q=reset Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developerscdnjs offers a large collection of popular libraries for JavaScript, CSS and more. Search the full collection and start using them on your website. - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN servi.. [CSS] 메뉴바 2차메뉴 숨길 때 / 정리 2차메뉴 만들때 높이값은 overflow:hidden 으로 선언.2차메뉴를 숨길때는 overflow:hidden 과 height:0; 같이 써서 숨겨야한다.다시 나타날땐 2차메뉴의 높이값을 계산해서(line-height 값으로 높이줬으면 그렇게 계산) hover에 height: 값px를 적용해준다. 거기에 transition을 적용해서 스르륵 펼쳐지게 해준다. ▶ 2차메뉴에 마우스가 올라갔을 때 배경 색이 바뀌게 할려면hover를 a태그가 아닌 li에 적용해야한다. 마우스가 올라갔을 때 같이 글씨 색도 바뀌게 할려면 a랑 li랑 각각 따로 적용해줘야한다. .submenu li:hover { background-color: rgb(223, 241, 255);} ▶ 1차메뉴에 마우스를 올렸을 때 전체 .. [CSS] animation 애니메이션 속성 animation 애니메이션 속성 :움직임(모션효과)을 만드는 속성. 해당 속성을 적용하면 해당 html 페이지가 로드되었을 때 바로 시작한다.from : 시작지점 to : 끝나는 지점을 말한다. animation: 아래 속성들을 한꺼번에 선언animation-delay: 0s;~초동안 지연시킴 / 이벤트 발생 또는 페이지 로드 후 몇 초 뒤에 애니메이션을 실행할지 결정animation-direction: 애니메이션의 진행방향 / alternate : 왕복 / normal: from에서 to로 띡띡 계속 이동animation-duration:0s;~초동안 애니메이션을 진행시키겠다. animation-iteration-count:몇 번 애니메이션을 진행할지 결정 / animation-iteration.. [CSS] transition 변환 속성, 움직임을 부드럽게 처리하는 속성 transition-duration :~초동안 변화하겠다. transition-duration:1s;transition-delay :지연. 사용자의 행위 후 ~초 뒤에 변화하겠다. transition-delay:2s;transition-property :특정 요소만 지정하여 transition을 적용시키겠다. transition-property: background-color, width;transition-timing-function :linear 시작부터 끝까지 같은 속도로 트랜지션을 진행한다. ease처음에는 천천히 시작해서 점점 빨라지며 마지막에는 천천히 끝낸다. 기본값.ease-in 맨 처음 시작을 느리게 함ease-out 마지막을 천천히 끝냄.ease-in-out느리게 시작해서 느리게 끝냄* .. [CSS] transform 변형속성 ★ transform : 변형속성 브라우저 화면의 x,y,z 축을 이용해 태그의 모양을 바꿔주는 속성.x축과 y축을 사용하는 변형 속성을 2차원 화면 좌표라고 부르고, 여기에 z축이 추가되면 3차원 화면 좌표라고 부른다. z축은 브라우저를 보는 유저에게 가까울수록 양수값이다. *각각 쓸 때는 x y z 를 대문자로 써야한다. * 한꺼번에 쓸 때는 띄어쓰기로 구분한다. transform: rotateY(0deg) translate3d(0px, 0px, 150px);2차원 변형함수transform-translate(x,y)원래 자기가 있던 자리가 기준으로, 해당 축으로 특정 크기만큼 이동함. transform: translate(100px, 20px);transform-scale(x,y)박스의 중.. [CSS] flex 유연한 박스 만들기 / flex-basis/ flex-grow / flex-shrink / flex 아래 속성들은 부모박스에 display:flex; 걸고 자식박스에 직접 적용한다.flex-basis : 30px자식박스의 기본 넓이를 설정. 자식의 원래 컨텐츠 사이즈를 유지해준다. flex-grow : 1; flex-basis를 제외한 여백 부분을 grow에 지정된 숫자 비율만큼 영역을 나눠 가지겠다. flex-shrink : 2;유연하게 줄이기flex: 한꺼번에 선언. flex-grow의 자리, flex-shrink의 자리, flex-basis의 자리순. flex-basis :유연한 박스의 기본 영역 / 자식박스의 기본 넓이를 설정 flex-basis는 flex가 적용된 자식박스(아이템)의 기본 크기를 설정한다. flex-basis는 기본적인 넓이를 지정함으로 만약 컨텐츠 중 지정된 크기보다 .. [CSS] table 표에 사용하는 css 속성 border-collapsetable태그와 td또는 th 사이에 있는 두 줄을 한 줄로 합쳐줌border-spacingtable태그에 적용된 border와 th,td에 적용된 border 사이의 간격을 조절empty-cells내용이 없는 빈 칸을 나타낼지 숨길지를 정함 table-layout컨텐츠에 맞게 셀 넓이를 (고정)지정할 수 있다 / table-layout: fixed -> 셀 넓이를 고정 word-breaktable-layout을 적용했을 때 문장이 너무 길어서 표를 뚫고 나오는 경우 칸에 맞춰 문장을 아랫줄로 정렬 word-break: break-allvertical-align칸에서 글자를 top, middle, bottom 부분에 맞춰 정렬 border-collapse이외에는 잘 사용되지 .. [CSS] position 위치 속성 position:static;기본값. 좌표인식할수 없다. position:relative;태그가 출력된 위치가 기준점. top:0; left:0;만 쓸 수 있다.position:absolute;부모박스가 없으면 브라우저를 기준점. 부모박스 있으면 부모박스의 왼쪽 상단 모서리 0 기준점position:fixed;해당 위치에 고정시킨다. ex) position:fixed; top:0; left:0; / 보고 있는 브라우저 화면 기준position:위치를 설정할 때 사용하는 속성위치 속성에는 절대 좌표와 상대 좌표라는 개념이 있다. 절대 좌표는 0점을 기준으로 움직이는 좌표를 말하며 (브라우저 0점 왼쪽 위 모서리) 상대 좌표는 태그가 출력된 위치를 기준으로 움직인다. [속성값] - static (ex. .. [CSS] Background 배경/ 투명도 opacity와 alpha / 그라디언트 / background-color배경 색background-image배경 이미지 background-image: url()background-repeat이미지 반복 여부 / no-repeat : 반복하지 않음. background-attachment배경을 스크롤에 따라 고정할지 같이 스크롤할지 정함.background-position 배경의 위치를 정함 background-position: center center;background-size배경 크기 cover / contain 정비율을 유지하면서 크기 조정background 한번에 줄 수 있다. background: url() 반복여부 가로위치 세로위치 사이즈opacity 영역 안에 포함된 border, 컨텐츠까지 모두 투명하게 만들고, 자식요소들까지 .. [CSS] 선택자 / 후손 선택자, 자손 선택자, 동위(형제)선택자, 속성 선택자, 반응 선택자hover active, 구조 선택자, 형제 구조 선택자, 상태 선택자, 시작문자 선택자, 가상요소 선택자 / :not(hover) 1. 후손 선택자 (공백)부모 안의 자식들을 선택하는 선택자. 부모 안의 자식들을 선택할 때 공백으로 표기하고 구분함.[기본형] 부모태그 자식태그{ 속성: 값; }ex) div p{ }div 안에 있는 p를 선택해 가져온다. div p{}어떤 div에 클래스를 지정해줬으면 클래스 이름으로 불러오고 그 뒤에 p를 써서 가져와준다. .box1 p{} div> p> span 순으로 불러와준다. div p span {}= html 문서 내의 모든 div 태그 안에 있는 span 태그를 선택함 클래스 .box1 안에 있는 p 안에 있는 span을 불러옴 실습) ul안에 클래스가 menu인 자식안에 a태그를 선택해주세요 조건1. ul 안에 자식은 4개가 있어야합니다 조건2. a태그에는 네이버가 새.. 이전 1 2 다음
