인스펙터 검사도구로 디테일 손보기

웹사이트에 왼쪽 마우스클릭 그리고 검사 부분을 눌러서 디테일을 잡아주는 방법을 배워보자

요소에 오퍼시티 투명값을 주고 싶다면

opacity: 0.2; 이런식으로 줘야한다 소숫점이 있는 숫자로 입력해주어야 한다

 

디스플레이 속성 알아보기

처음부터 기본적으로 dispaly: block으로 지정되어 있다 

 

블록 - div 스타일을 주면 한 줄이 꽉참 백그라운드 색으로

인라인 - span 스타일을 주면 글이 있는 곳만 백그라운드 적용 그리고 div와 다르게 스팬을 더 만들어도

같은 줄에 위치함 인라인은 마진탑과 바텀이 적용이 안됀다..

 

span은 인라인 속성을 가진 그룹

div는 블락 속성을 가진 그룹이라고 보면 되겠다

 

inline:block 인라인과 블록사이의 효과 나란히 지을 수 있으면서 마진 탑과 바텀도 적용가능함

 

트랜지션

조금 쉬어가는 단계?로 트랜지션에 대해 알아보고자 하는데요

 

원중에 아무거나 선택하고

transition: 1s; 을 붙여주자 이 뜻은 1초 동안 어떤 변화를 준다는 뜻인데요?

 

예를 들어 3번째 원에 효과를 준다고 하면

.circle:nth-child(3):hover {}라는 것을 따로 스타일 사이에 입력 해줘야한다

그리고 {}사이에 마우스를 댔을 시에 변하는 값을 입력해주면 된다 ex{background-color: blue}

 

hover는 마우스를 갖다 댔을때

active는 마우스를 클릭했을때 

 

<link rel="stylesheet" href="css/style.css">는 스타일 css에 스타일을 옮겨서 다른 작업을 할때도 같은 효과를 간단하게 주기 위해 style.css 링크를 걸어두는 것이다 아래의 코드를 외워둘 필요가 있다 특히

href=style.css 라고 그냥 쓰는 경우가 있는데 경로를 정확히 입력 css/를 앞에 붙여줘라

css 폴더안의 스타일 css라는 뜻을 기입해줘야 한다

 

ol 순서가 있는 리스트들 ul 순서가 없는 리스트들 둘다 class나 id 대신에 적어준다

li의 특징은 자동으로 번호를 앞에 붙여준다

사실 ul과 ol의 차이점은 ul은 앞에 점을 붙여주고 ol은 번호를 붙여준다 별 차이없다....

이미지를 가져오기

<img src="img/issue-1.jpg" /> 이렇게 입력하면 된다 "" 이제 사이에 있는 것은 파일의 경로라는 것 쯤은

감으로 알거라 생각합니다 :) 

 

물론 style.css에 모든 스타일을 저장해도 되지만 알기 쉽게 같이쓰는 공용 style부분을 제외하고

해당문서 스타일 박스 사이에 넣어 놓는게 더욱 알기쉽다

 

그리고 모든 p태그에는 별도의 마진이 적용되어있다 그러므로 공용 style.css에 p {margin: 0;}을 적용하고 작업하자

position: absolute를 줬다면 이제 주는 값의 방향쪽에서 위치를 잡는다고 생각하면 된다

예를 들어서 포지션 앱솔루트를 주고 탑30 라이트 26을 주면 오른쪽 구석부터 마진이 생기는 위치에 위치하게 된다

그리고 아마 앱솔루트를 주면 부모영역을 벗어나 다른위치에 위치하는 경우가 있는데 이런경우엔

부모의 포지션 속성값을 포지션 릴레이티브로 설정을 해야 부모에 속하면서 위치할 수 있다

 

그리고 부모 안의 것을 개별로 스타일 주고 싶으면 알고있지만

.featured .title 이렇게 한칸 띄우고 점을 이용해 선택해주면 되겠다

 

issue1의 1이 글 줄보다 위에 위치한다 스팬태그로 감싸고 위치값을 줘도 되지만

sup라는 태그를 이용하면 글줄보다 위에 위치하게 된다

 

파일 경로로 이미지 가져오기 말고 css 속성으로 가져오기

파일 경로로 이미지 가져오기 말고 css 속성으로 가져오기 방법은

 

background-image: url("img/issue-1.jpg"); 이렇게 피쳐드의 스타일 속성안에 입력해주면 된다

 

이미지 사이즈를 설정하기보단 백그라운드 이미지를 활용해서 해주는게 좋다

이때 별도로 나눈 박스의 이름을 설정하기 보단

nth-last-child(3) {}를 이용해 순서대로 작업하는 것이 바람직하다

 

보통 백그라운드 사이즈 커버를 하면 비율에 맞게 위에부터 이미지가 시작하는데

여기서 백그라운드 포지션 센터를 추가 해주면 이미지가 가운데 정렬로 지정된다 :)

 

중복으로 효과를 주고 싶은 경우엔 ,를 사용한다 예를 들어 ul, li {} 이렇게

 

white-space: nowrap;이 태그는 인라인 블록으로 인해 바깥으로 튀어나간 사진들을 해결할 때 사용한다

 

보통 코딩에서 wrap이라고 하는 것은 줄바꿈을 의미한다

 

패딩을 여러값을 한번에 주려면 이렇게 하면된다

 

padding: 6 12 24 24 이런 예를 들어보면

앞에서 부터 시계방향의 방향으로 들 수 있다 6은 상단 탑 패딩 시계방향으로 우 하 좌 이렇게

수치 값을 나타낸다고 보면 된다

 

마진도 똑같이 적용이 된다 :)

 

열공열공 자랑스럽다