본문 바로가기

분류 전체보기

 (150)
반응형 웹 #6 px를 %로 바꾸기 (4) : 멀티미디어 요소 img, video{ width:100%; max-width:100%; } width는 parent 대비 본인의 크기. max-width는 최대한 커질 수 있는 크기. 두가지 차이 분명히 알아두자.
반응형 웹#5 px를 %로 바꾸기: 가변폰트 *사전지식 rem의 경우 최상위 .root의 font size를 상속하고, em의 경우 부모 요소의 폰트 사이즈를 상속한다. 가변폰트 반응형 웹에서 글자 크기를 상대적인 단위로 사용할 때, 상속 문제를 해결해주는 방법을 가변 폰트라고 함. (가변 폰트를 적용할 글자 크깃값)/(적용할 요소를 감싸고 있는 요소의 글자 크깃값) = 가변 폰트 값 em 부모가 64px 이고 자식이 32px되려면 부모는 4em, 자식은 0.5em이다 왜냐면 32/64*0.2 = 0.5이기 때문이다. 혹은 자식을 50%라고 지정해줘도 괜찮다. 가변 폰트1 가변 폰트2 매번 이 난리를 치지 않기 위해 등장한 것이 rem rem rem 단위는 웹 문서의 시작인 html을 기준으로 한다. 상속 문제가 발생하지 않아서 유용! 가변 폰트1..
반응형 웹#4 px를 %로 바꾸기. 방법1: (가변 패딩을 적용할 패딩값)/(적용할 박스를 감싸고 있는 박스의 가로 너비) X 100 = (가변 패딩값) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia eius labore perferendis quia, cumque recusandae. Ipsam voluptatem reiciendis aliquid, illo illum est unde placeat iure nobis ratione soluta atque aut!Quo, placeat. Accusantium autem error soluta architecto labore quidem, eius aliquid? Molestiae, assumenda ratione la..
반응형 웹 #03 px를 %로 바꾸기(1) 가변 그리드 공식 이해하기. -가변 그리드라는 기술? 정해져있는 공식에 의해 정확한 가변 크기의 박스를 만드는 기술. -( 가변 크기로 만들 박스의 너비)/(가변 크기로 만들 박스를 감싸고 있는 박스의 가로 너비) X 100 = 가변 크기의 값. 예시 box1: 300px, wrap: 960px의 비율을 유지한다고 하자. (300/920)*100=31.25 가변 마진과 가변 패딩 이해하기 -(가변 마진을 적용할 마진 값)/(적용할 박스를 감싸고 있는 박스의 가로 넓이)X100 = 가변 마진값 예시 box1, box2: 300px (width) wrap: 960px (width) 의 비율을 유지한다고 하자. box1의 오른쪽에 가변 넓이 360px의 margin을 주자. 300/960*100=31.25 3..
반응형 웹 #2 기본 개념 이해(2) 반응형 웹 제작 핵심 기술 : 가변 그리드 가변 그리드는 웹 사이트를 제작할때 화면의 크기에 상관없이 자유롭게 늘어나거나 줄어들 수 있도록 픽셀(px) 대신 퍼센트(%)로 제작하는 기술. hello 미디어 쿼리 미디어의 화면 크기에 따라 웹사이트를 이에 맞게 변경하는 기술. *쿼리: 컴퓨터에게 질의 하는 것. hello 뷰포트 화면에 보이는 영역을 제어하는 기술. 미디어 쿼리로 화면 크기를 감지해야할 때 꼭 필요. 데스크톱은 사용자가 지정한 해상도가 보이는 영역이 되지만, 스마트 기기는 기본 설정값이 보이는 영역으로 설정됨. 따라서 미디어 쿼리를 사용해도 스마트 기기의 실제 화면 크기를 감지 못하므로 반응형 웹 제작시 반.드.시!! 필요!
반응형 웹 #1 기본 개념 이해(1) 모바일 기기에 적합한 뷰를 보여주고자. PC버전, 모바일버전 두개 따로 만들어야하는 수고를 덜기 위해 반응형 웹 등장. 1. 즉, 반응형웹은 비용 절감의 측면에서 등장. 2. 마케팅에서 최적화되어있다. 환경이나 기기에 따라 최적화된 구조의 웹사이트를 보여줌. -> 전달하고자 하는 내용 확실하게 표현 가능. 3. 검색 엔진 최적화 모바일 버전, PC 버전 주소가 두개일 경우, 검색 결과에서 상위권에 배치되기 힘들다. 하나의 주소(파일)로만 이루어져 있으면 검색결과에 좀 더 잘 노출 될 수 있다. 4. 미래지향적 어떤 기기가 나올지 모르는 상황에서 가장 좋은 접근법. 5. 예시 5.1 스키니타이 넥타이를 판매하는 회사. 쇼핑몰의 경우 결제 등 시스템이 복잡해서 반응형으로 개발이 어렵다. 스키니 타이는 이러한..
#2 각종 html 요소 알아보기 2.1 문자 실체 참조와 수치 문자 참조 적용 &lt &gt ©등 태그와 헷갈릴 수 있는 요소들. 문자실제참조(&lt)와 수치문자참조(<)이 있는데 둘 중에 아무거나 써도 html5는 상관 없다. 다만 xhtml의 경우 다르다. 2.2 구문을 강조하거나 하이라이팅 지정하기 strong em mark strong, em, mark 나는 예쁘다. 저기 있는 웅덩이는 깊어서 들어가지 마세요. 12월은 차량 사고 확률이 증가한다. 눈이 많이 오기 때문이다 2.3 단의어 정의와 약어, 작품의 제목 표현 딩크족 월드와이드 웹 컨소시엄(W3C) 가을동화아이유 값: 50,000원 (부가세 별도) 2.4 루비 주석과 시간의 표현 家和萬事成가화만사성 家가 和화 萬만 事사 成성 오늘은 친구 생일이라서 일찍 들어가 봐야 합니..
#1. html 작성 기초 1.1 웹표준이란 1.1.1 웹표준 웹표준의 세가지 계층 Structure 구조계층(HTML, XHTML): 무슨 의미인가 Presentation 표현계층(CSS): 어떻게 보이는가 Behavior 계층동작(JavaScript): 어떤 동작을 하는가 위에서 알아야하는 사항들 HTML 구조 계층은 모든 웹페이지에 필수적이다. HTML이 없으면 웹페이지도 없다. CSS와 JS는 필수 계층이 아니다. 동적계층이나 표현 계층이 없어도 기본적인 사용이 가능해야한다. 표현계층은 CSS로, 계층동작은 JS로 분리해야한다. 접근성과 사용성에도 적극적이어야 한다. 예를 들어 iamge의 경우 alt가 있어야한다. 아니면 시각장애인의 경우 그 이미지가 의미하는 바가 무엇인지 알 수 없다. 컴퓨터가 그냥 url을 읽을 것이..

티스토리툴바