본문 바로가기

CSS🔧95

css @media 미디어쿼리 가변레이아웃 여기 전체 화면일때 4개씩 보이는 컨텐츠를 창을 1412px로 줄여줬을때 3개씩 나오도록 조정해주자. 먼저 그리드 부터 계산을 잘 해주고 들어가야한다 웹 화면은 전체화면 1920이지만, 컨텐츠 그리드는 1280px을 기준으로 한다. (화면 환경이 다 다르기 때문에 표준 1280) 거기에 스크롤바 크기도 감안해줘야 하기때문에 1280 - 17 (세로 스크롤바 크기) = 1263 (컨텐츠 최대크기) 가 나온다. 그렇기 때문에 데스크탑 컨텐츠 그리드는 일반적으로 1200px 을 사용하여 1280에서도 좌우여백 30px씩 확보한다. 따라서 컨텐츠 그리드가 1280 이상일 경우 가변레이아웃 처리가 필요하다 (css 미디어 쿼리 사용) 보통 심미성, 사용성, 매체성 디자인에 사용 컨텐츠 4개일때 전체 넓이 1304.. 2022. 9. 7.

css magin, padding 여백주는 방법! magin / padding 차이점과 쓰임!! F12, 개발자 모드에서 볼 수 있는 margin 과 padding 값 margin : 오브젝트 바깥 여백 (오브젝트를 이동하거나, 빈 간격을 줄떄 사용) / 음수사용가능 사용법 (시계방향으로 값주기) - margin: 위, 오른쪽, 아래, 왼쪽 / 4개지정 - margin: 위, 좌우, 아래 / 3개 지정 - margin: 위 아래 좌우 / 2개 지정 - margin: 모두 (사용자제할것!) - margin:0 auto 가로가 있는 블럭 가운데 정렬할 때 * margin collapsing 마진병합 : 부모+자식이 수직방향으로 인접할 때 부모 or 자식 위,아래가 margin-top이 가장 바깥 조상에 적용됨. 형제요소가 수직 방향 인접일 .. 2022. 9. 7.

css display란? (block, inline, inline-block) 블록요소 인라인 요소란? CSS block element CSS inline element - 모든 인라인 요소를 포함 할 수있다. + 블록 요소도 포함 할 수 있음 - 너비 width, 높이 height, 안쪽여백 padding, 바깥여백 magin 사용가능 - 블록 요소가 끝나는 지점에서 자동 줄바꿈됨 - 인라인 요소는 다른 인라인 요소를 포함 할 수 있다. - width, height 사용불가. line-height (높이 조절) & text-aling (텍스트 정렬) 로 사용 - 인라인 요소가 끝나는 지점에 줄바꿈 없음 - 컨텐츠가 끝나는 지점 까지의 넓이를 가짐 display : 화면의 웹페이지 레이아웃에 어떻게 나오게 할것인지 결정하는 속성태그 1. dispaly:block (상자) 2. di.. 2022. 9. 6.

xe 아이콘 적용하기 http://xpressengine.github.io/XEIcon/started.html XEIcon, 문자를 그리다 XEICon은 웹사이트 제작에 최적화된 벡터 그래픽 아이콘 툴킷입니다. 여러분의 아름답고 직관적인 웹페이지 제작을 돕습니다. xpressengine.github.io html 코드복사 http:// 붙여주기 태그 복사 적용 i 태그로 사용 2022. 9. 5.

구글 머티리얼 아이콘폰트 적용하기 https://fonts.google.com/icons 사용하려는 아이콘 클릭 > 우측 하단 > static icon 링크 복사 > HTML 삽입 > CSS 조정 html 상단 link로 삽입 아이콘 넣기 > 다시 구글 폰트에서 하단 Inserting the icon > span 태그 복사 이미지가 아닌 폰트기 때문에 폰트로 적용 CSS적용 ※ 태그를 로 변경 (아이콘 표시에만 쓰기때문에 변경) 아이콘이 매우 많이 (100개이상) 필요하거나 CMS 관리자 페이지 디자인시 사용 비지니스 사이트에서는 사용할 필요없음 아이콘 폰트 사용시 로딩시간이 길어질 수 있기때문에 실무에선 거의 사용안함 2022. 9. 5.

css before, after 가상선택자 정리 가상선택자를 왜쓸까? HTML에서 CSS class 가 지정되지 않았을경우 가상선택자를 이용해서 꾸미는게 가능하다 (맞나..?) :before, :after 특정요소의 앞(:before) 또는 뒤(:after)에 지정한 내용 (텍스트나 이미지)를 추가할 수 있음 인라인 요소로 가짜속성이기 때문에 content="" 필수 속성으로 들어감!!! (after 줄때 html에 표기하지 않고도 css의 부모 요소에 :after 삽입) 구글정의 선택자 뒤에 :가상이벤트를 붙이면 특정 이벤트마다 적용 할 스타일을 설정 할 수 있음 :link - 방문한 적이 없는 링크 :visited - 방문한 적이 있는 링크 :hover - 마우스를 롤오버 했을 때 링크로 다른 페이지로 이동한후 링크컬러 변경 a:visited {c.. 2022. 9. 4.

css 기초 용어정리 id 스킵네비게이션으로 이동해야하는 부분만 id로 네이밍 나머지는 class로 네이밍함 여러요소 동시 선택할때 h1,h2,h3,h4,h5,h6 {font-weight: normal;} *모든요소 전체 선택자, 초기시 한방에 적용 *{margin: 0; padding: 0px;} 여백없애기 CSS 맨 상단 calc : calculation속성의 값을 계산을 해주는 함수 / width: calc(25% - 45px / 4); vertical-align:0px - 인라인블럭요소 위아래 위치 조금이동 white-space:nowrap - 글자아래로 안내려가게 포지션요소는 기준에서 overflow:hidden으로 가릴수있음 viewport (브라우저화면) heigth : 화면꽉차게 height: 100vh; 2022. 9. 4.

CSS 선택자 우선순위 점수 선택자 우선순위 css에서 같은요소가 여러 선언의 대상이 됬을때 우선적으로 적용할것을 결정 1. 점수가 높은 선언이 우선 2. 동점시 가장 마지막에 작성된 선언이 우선 !important : 10000점 / 남용금지 (인라인스타일로 적용된 내용 변경시에만 사용) 금기! 진짜 정 위급한 상활일때만 인라인 스타일 1000점 아이디 선택자 100점 클래스 선택자 10점 태그 선택자 1점 (가상요소 before, after 은 1점) .section01 + p 는 몇점일까? 클래스 선택자 10점 + 태그 선택자 1점 = 11점 추가 - 가상클래스 선택자 (:hover, :first-child, :nth-child(n), :last-child )10점 - .gnb>li:not(:first-child) 첫번째를 제.. 2022. 9. 4.

웹폰트 변환 사이트로 적용하기 다운로드 받은 폰트를 웹으로 변환하는 사이트 변경후 꼭 BMJUA_ttf이랑 같게! 빈칸금지 폰트 체크후 에드폰트>컨버트>다운로드 다운로드 폰트 이름명 변경 후 작업 폴더로 삽입 https://transfonter.org/ Online @font-face generator The @font-face CSS rule allows web developers to specify online fonts to display text on their web pages. By allowing authors to provide their own fonts, @font-face eliminates the need to depend on the limited number of fonts users have installe.. 2022. 9. 2.

브라우저 지원 폰트 https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp CSS @font-face Rule W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com ttf 윈도우용 otf 맥용 2022. 9. 2.

구글 웹 폰트 적용 - 추가하기 구글 폰트 > 폰트선택 > 굵기 + 누르기 > 태그중 하단의 웹폰트연결 코드만 복사 review > link rel (사용안함 익스 호환불가) / link href 사용 - 위치 common.css 위쪽에 붙여줌 무조건 body위에 위치 (body위면 상관없으나 meta , tiltle 밑에 위치가 정석 ) - 붙여넣기 css 폰트상단적용 font-family: 'Noto Sans KR', - 비교할떈? 맑은 고딕 넣어보기 - 2개적용시 영문폰트가 앞으로 가야함 (한글폰트가 앞이면 영문적용안됨) 사이트전체에 영문이 매우많은 경우에만 사용 한글 영문이 섞여있는경우 폰트가 달라지므로 영어가 많은 사이트에서 권장 2개폰트 선택 > rivew > 2개 링크복사 2022. 9. 1.

이전 1 ··· 5 6 7 8 다음

티스토리툴바