본문 바로가기

html

 (63)
[10분 테코톡] 🦄 콜린의 Flex Layout Layout - 문서 위에 상자를 적절한 위치에 배치하는 것 Layout [normal flow] - 브라우저가 기본값으로 HTML페이지를 배치하는 방법 크게 두가지가 존재 1) block - 자신의 부모요소 넓이를 전부 차지하게 됨, - 또한 새로운 블록이 추가될 시 아웃라인 즉 개행되어 추가되는 형태 2) inline - 부모의 전부, 부모너비의 전부를 차지하지 않고 컨텐츠 영역만 너비를 차지하며, - 새로운 인라인 요소는 부모의 최대 너비를 넓지 않는 선에서 나란히 위치하게 됨 - 만약 부모의 너비를 넘겼다면 개행하여 위치하게 됨 Flex - 요소들을 행, 열 단위로 정렬하기 위한 1차원 레이아웃 Flex 용어 ✔ flex container : flex 아이템들을 배치 , 정렬 - flex-dire..
[10분 테코톡] 🎉 동동의 CSS 방법론 1. CSS란 - HTML 또는 XML로 쓰여진 문서의 스타일을 나타내기 위해 사용되는 언어 - 문서의 구조와 스타일(디자인)을 분리하여 HTML이나 XML의 각 요소를 꾸미는 것이 역할 2. CSS 등장 이전/ 이후의 스타일링 - 등장이전 : 각 요소의 전용 속성이나 style 속성으로 스타일을 일일히 지정 ex) font 요소의 color 속성에 hex 코드를 넣어 색상 스타일을 부여하거나 각 요소의 style 속성에 inline으로 스타일을 기재하여야 했음 => 문제점 1) 같은 스타일 요소를 여러 페이지마다 사용하면, 하나를 수정할 때마다 그만큼 반복하여 수정 해야함 2) HTML은 본래 문서구조를 의미하므로 HTML에 직접 스타일을 지정하는 것은 바람직하지 않음 - 등장이후 : css 파일에는 ..
[10분 테코톡] 🎁 브랜의 프론트엔드에서 Component란 1. 컴포넌트 - 전체의 부분 여기서는 비행기로 예를 들었다. 비행기에 각 부분들이 나누어서 설계가 되지 않고 하나의 덩어리로 이루어지게 된다면 어떻게 될까? - 컴포넌트가 없다면? 높은 의존성 - 반복 X - 재사용X - 규모가 큰 설계X 2. 프론트엔드 컴포넌트 - 과거의 웹사이트는 HTML페이만으로 구성되어있었음 => 유저의 액션에 대해 매번 새로운 HTML페이지를 서버에 내려주어야 했음 => 페이지의 일부만 변경하고 싶어도 전체 페이지를 새로 내려주어야 한다는 점에서 비효율적이였음 => ex) 과거 네이버 anchor와 table 태그 위주로 구성되어 있었음 == 정적인 페이지 - 1990년대 후반에 AJAX가 등장하면서 웹의 변화가 시작 됨 => 필요한 데이터만을 전달받고, 화면에 일부분만 다시..
[10분 테코톡] 🪐빙봉의 정규 표현식 1. 정규표현식의 이해 1951년 생김 수학자 Stephen Cole Kleene에 의해 생겨남 수학적인 개념으로 발생하게 됨 - 편집기의 패턴 매칭을 시작으로 사용 - grep 명령어가 정규표현식을 사용 - vi,emacs 같은 편집기나 sed,awk 같은 유닉스 명령어에 정규표현식이 추가 - 이후, IDE와 여러 프로그래밍 언어의 표준 라이브러리로 지정됨 능력 : 특정 패턴을 가지고 문자열을 찾을 수 있다. 정규표현식이 있는 것과 없는 것의 차이 - 전화번호 유효성 검증 요구사항 1. 맨 앞의 번호는 010으로 시작 2. 대시('-')로 구분 3. 구분된 숫자는 4자리의 숫자가 와야함 - 정규표현식이 없다면 많은 if문이 사용될 것임 메타문자 . : 모든문자 [] : 대괄호 안에 들어가 있는 문자를 ..
Html - 외부 폰트 사용하기 구글에 폰트를 검색하면 https://fonts.google.com/ 라는 무료폰트 제공 사이트가 있다. 이곳에서 우리가 사용할 것은 한글이니 Language를 한글로 바꿔주고 마음에 드는 글씨체를 찾았다면 들어가서 Select를 누르게 되면 우측에 네비게이션 바가 열리는데, 이 의 내용을 html의 가나다라마바사 아자차카타파하 수행결과
Html - 애니메이션 효과2 (애니메이션 프레임 , transform) 태그에 keframes "스타일시트명" 을 이용해 내가 사용할 애니메이션 효과를 만든다. 이번에 해볼 것은 시간이 지남에 %가 바뀌어 배경색을 바꾸는 것과, transform:translate(x,y); 로 해당 태그 위치 좌표를 바꾸는 것이다. 이러한 샘플 애니메이션 효과를 적용시킨 p 태그의 스타일로 animation-name : (적용할 애니메이션 이름) 에는 내가 만들 sample 애니메이션 효과를 적으면되고 animation-duration : 에는 적용될 시간을 작성하면 되고 animation-fill-mode : 에는 수행 뒤에 하게 될 내용을 쓰면 되는데, 이러한 형식들은 검색을 활용해 여러가지를 적용해보자. 애니메이션 수행내용
Html - 애니메이션 효과 (text-decoration , transition) 마우스가 호버될 당시에, block의 길이가 길어지고, 색상을 변화시키는 애니메이션을 주는 방법이다. transition와 hover를 사용해 마우스를 올릴 때 width값이 변하는 시간이 달라지고, color로 컬러를 변경시키는 시간을 설정을 할 수 있다. 쇼핑몰 메뉴 신상품 인기상품 50 타임세일!!! 고객센터 수행결과
Html - 긴 문장 스크롤 처리 하기 ( overflow-x, y ) (회원가입 약관동의) overflow-y: scroll; = y축 ( 세로로 오버플로우 되는 것을 scroll 방식으로 바꾸는 것 ) overflow-x: scroll; = x축 ( 가로로 오버플로우 되는 것을 scroll 방식으로 바꾸는 것) 다음은 네이버 회원가입 약관동의의 긴 글을 사용한 예제이다. 코드가 길어서 결과창을 먼저 보여주겠다. 서비스 이용약관 여러분을 환영합니다. 네이버 서비스 및 제품(이하 ‘서비스’)을 이용해 주셔서 감사합니다. 본 약관은 다양한 네이버 서비스의 이용과 관련하여 네이버 서비스를 제공하는 네이버 주식회사(이하 ‘네이버’)와 이를 이용하는 네이버 서비스 회원(이하 ‘회원’) 또는 비회원과의 관계를 설명하며, 아울러 여러분의 네이버 서비스 이용에 도움이 될 수 있는 유익한 정보를 포함하고 있습..

티스토리툴바