티스토리

Hi-Woong
검색하기

블로그 홈

Hi-Woong

hi-woong.tistory.com/m

웅-이 님의 블로그입니다.

구독자
1
방명록 방문하기
공지 개인적인 공부,정리하는 공간입니다. 모두보기

주요 글 목록

  • 스타일시트 선언 선택자의 종류 기호 가중치 전체선택자 * 0 태그선택자 태그이름 1 클래스선택자 . 10 아이디선택자 # 100 Position 위치 기준 static X - relative O 원래있던위치 absolute O static이 아닌 부모 => body fixed O body (최상위) Float (left,right) 스타일시트선언방식 => 인라인 head => style태그 => 내부 완전한 파일분리 =>외부 => 로 연결 우선순위 !important 인라인 > 내부 > 외부 아이디 > 클래스 > 태그 > 전체 나중에 선언 > 먼저 선언 공감수 0 댓글수 0 2022. 5. 2.
  • overflow overflow 속성 (1) visible : 영역이 벗어나도 그대로 보임(기본값) 아무것도 설정 안하면 visible로 설정 되어있음 (2) hidden : 영역이 벗어나면 전부 숨김처리 (3) scroll : 스크롤 처리 (4) auto : 영역을 벗어나지 않으면 스크롤이 없고 영역을 벗어나면 스크롤로 처리 1) visible → 2) hidden → 3) scroll → 4) auto float float: 요소를 띄워서 배치하는 속성 left, right 각 방향대로 배치가능! 레이아웃 예제 실습 div한 영역안에 기준을 500으로 잡아서 나머지 div들을 기준을 %로 나눠서 공간을 잡아준다 이름태그 는 가중치가 1이기때문에 id 태그(가중치 100)를 후에 따르게된다 공감수 0 댓글수 0 2022. 5. 2.
  • Position position : static 위에서 아래로 배치 , 위치 속성 비활성화 position의 기본값 position : relative 위치속성 활성화 기준: 본인이 원래 있었던 위치 1-2. Absolute 요소를 일반적인 문서 흐름에서 제거한다. 가장 가까운 위치에 있는 조상 요소를 기준으로 배치한다. 조상 요소 위치를 기준으로 위쪽(top), 아래쪽(bottom), 왼쪽(left), 오른쪽(right)에서 얼마만큼 떨어질 지 결정한다. 조상 중 Position을 가진 요소가 없다면 초기 컨테이닝 블록(요소)를 기준으로 삼는다. (static을 제외한 값) 문서 상 원래 위치를 잃어버린다. (아래에 있는 div가 해당 자리를 차지한다) 부모요소가 없기때문에 body태그 기준이 된다. 즉 화면을기준으로.. 공감수 0 댓글수 0 2022. 5. 2.
  • 공간분할태그 가시속성 display속성 (1) block 기본값이 무조건 한 줄을 차지자하고 있는 요소 width, height 설정이 가능하다 (2) inline 내가 담은 컨텐츠까지만 크기로 가지는 요소 width, height 설정이 불가능하다 영역 크기설정 block 한줄 O inline 내가넣은컨텐츠 X none X X (3)none속성 질문이 2개이기때문에 클래스로 묶어준다! 속성에 none 를 설정 하면 보이지않는다 :hover 속성을 줘서 마우스를 올렸을시 질문에 대한 답이 나타난다 실습예제1 CSS위치속성 박스모델 박스 모델 (Box Model) Content : 내가 넣은 내용 Padding : 안쪽 여백 Border : 테두리 Margin : 바깥 여백 Padding margin, padding .. 공감수 0 댓글수 0 2022. 5. 2.
  • 크기 단위 px로 조정 em으로 조정 rem으로 조정 공감수 0 댓글수 0 2022. 5. 2.
  • 그룹 선택자 그룹선택자 , 로 이용 h1,p{ color: blue; } #htmlcss,#python{ color: green; } 반응선택자 :active =>마우스를 클릭했을때! :hover =>마우스를 올렸을때! hover -> active 순으로 div:hover{ color: purple; } div:active{ color: aqua; } 2강의장 수업 녹화 꼭 해주세요! 오전 : 선영표 오후 : 손지영 태민씨 잘 보이시나요? 공감수 0 댓글수 0 2022. 5. 2.
  • 계층선택자 계층 선택자를 이용해서 해당 결과에 스타일을 입히자! 1.div기준으로 자손선택자인 span태그의 색상을 tomato 2.div를 기준으로 자손선택자인 li태그의 색상을 blue 3.ol을 기준으로 자식선택자인 spqn태그의 색상을 red 4.li를 기준으로 근접후행 선택자인 li태그의 색상을 green 5.li를 기준으로 후행선택자인 li태그의 색상을 pink div span{ color: tomato; } div li{ color: blue; } ol>span{ color:red; } li+li{ color: green; } li~li{ color: pink; } **기준:nth-child()** 연수생 수칙 지각하지 않기 결석하지 않기 (불가피할 땐 꼭 담당연구원에게 미리 말하기) 복습하기 공감수 0 댓글수 0 2022. 5. 2.
  • 선택자 CSS 웹페이지를 꾸며주자! 기본구조 선택자 스타일 이번주에 뭐먹지? 월남쌈 마제소바 김치찜닭 공감수 0 댓글수 0 2022. 5. 2.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.