본문 바로가기

웹개발

 (70)
[10분 테코톡] 🕶 곤이의 DOM&BOM 1. 웹 구성 요소 HTML - 뼈대 ( 제목 / 이미지/ 표 등을 정의 ) , 구조와 의미를 부여하는 정적언어 - 웹의 전체적인 구조를 담당함 CSS - 옷 (색상 , 레이아웃, 폰트 등을 지정), 콘텐츠를 꾸미는 정적 언어 - 웹의 시각적인 표면을 담당함 JS - 기능 , HTML의 정적이고 단조로운 한계를 극복하기 위해 만들어진 언어 - 웹 문서를 더욱 동적으로 처리할 수 있도록 도와줌 JS는 어떻게 확장자가 다른 HTML과 CSS파일의 내용을 읽고 수정할 수 있을까?? 해답은 2번 DOM에 있음 2. DOM (Document Object Model) - 문서에 대한 모든 내용을 담고 있는 객체 - 텍스트 파일로 만들어진 문서를 브라우저가 이해할 수 있는 구조로 구성한 것 - HTML 요소 간의 부..
[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. 웹 표준 등장배경) -초기 -> 증기 -> 말기 -초기 : 넷스케이프 vs 인터넷 익스플로러 -중기 : IE가 독점 , IE는 자사에 유리한 플러그인을 대거 채용 ( 호환성을 고려하지 않음 ex)ActiveX ) -말기 : 새로운 플랫폼인 스마트폰의 등장 웹표준이란?) - 어떠한 운영체제나 브라우저를 사용하여도 동일한 컨텐츠를 볼 수 있도록 웹에서 표준적으로 사용되는 기술이나 규칙 - 팀 버나스리를 중심으로 한 W3C이라는 조직의 토론에 의해 결정됨 웹표준의 장점) - 검색엔진 최적화 = 웹 페이지가 검색 결과를 좀 더 높은 순위가 나올 수 있도록 하는 작업 - 개발자가 코드를 이해하기 더 쉬워짐 = 사람도 의미를 가진 태그를 통해 만들어진 구조를 더 이해하기 쉽다. ..
[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 : 에는 수행 뒤에 하게 될 내용을 쓰면 되는데, 이러한 형식들은 검색을 활용해 여러가지를 적용해보자. 애니메이션 수행내용

티스토리툴바