2. Front-end

CSS - [ 속성 ]

CSS에서 속성은 Properties로, HTML의 속성 Attributes와는 표현이 약간 다르다. 크게 박스 모델, 글꼴 문자, 배경, 배치, 플렉스, 전환, 변환, 띄움, 애니메이션, 그리드, 다단, 필터로 나눌 수 있다. 1. 너비 width 와 height는 요소의 가로 세로 너비를 지정해준다. span 은 인라인 요소로 기본값은 포함한 콘텐츠 크기만큼 설정되고, div 는 블록 요소로 기본값은 가로는 부모 요소의 크기만큼, 세로는 포함한 콘텐츠 크기만큼 설정된다. 인라인 요소는 가로 너비가 최대한 줄어들려 하고, 블록 요소는 최대한 늘어나려 한다는 게 차이점이다. 그리고 인라인에는 width와 height를 설정할 수 없다는 점 다시 상기하자!! max-width, max-height나 min..

CSS - [ 스타일 상속 ]

스타일 상속에 대해 알아보자. 예를 들어 사진과 같은 코드가 있을때, 호랑이, 사자, 코끼리의 부모 요소로 animal 클래스를 가진 div 요소를 확인할 수 있다. .animal 선택자에 스타일을 주면 동물 부터 호랑이, 사자, 코끼리 까지의 코드에 모두 스타일이 적용된다. animal 클래스에 css를 적용했을 때 자식 요소, 나아가 하위 요소들에 영향을 미치는 것을 스타일 상속 이라고 한다. 즉 부모 요소 혹은 조상 요소로부터 적용된 스타일이 자식이나 하위 요소로 상속되어 적용되는 것을 css의 스타일 상속 이라고 한다. 모든 요소가 상속 되는 것은 아니고 글자/문자 관련 속성들이 상속된다. 물론 여기에도 예외는 있음! 실질적으로 상속되지 않는 css 내용도 강제적으로 상속시킬 수 있는 강제 상속도..

CSS - [ 선택자 ]

선택자 { 속성: 값; } CSS에서 중괄호 영역 앞쪽에 작성하는 부분을 HTML의 특정한 부분을 선택한다는 의미에서 선택자라고 부른다. HTML에서 선택자에 해당하는 부분에 중괄호 영억의 속성과 값들이 적용된다. 여기엔 크게 5가지 종류가 있다. 1. 기본 전체 선택자 : * 로 사용하며 HTML의 모든 요소를 선택한다. 태그 선택자 : 태그 이름에 해당하는 요소를 선택한다. 클래스 선택자 : HTML class 속성의 값에 해당하는 요소를 선택하며 .클래스명 과 같이 작성한다. 아이디 선택지 : HTML id 속성의 값에 해당하는 요소를 선택하며, #클래스명 과 같이 작성한다. 2. 복합 (기본 선택자를 조합해서 사용) 일치 선택자 : 두 개의 선택자를 동시에 만족하는 요소 선택. ex) span.o..

HTML - [ 오픈 그래프 / Favicon]

1. 오픈 그래프 오픈그래프란 웹페이지가 소셜 미디어(페이스북 등)로 공유될 때 우선적으로 활용되는 정보를 의미한다. 대표적으로 카톡에 웹 사이트의 주소를 전송하면 아래에 웹 페이지가 카드 형식으로 나타나는 것을 의미한다. 아래와 같이 코드 작성하면됨! property에 작성한 og란 오픈 그래퍼의 약어이고, 타입, 사이트 이름, 타이틀, 설명, 이미지, 사이트 주소 등을 명시할 수 있다. og:type = 페이지의 유형(E.g, website, video.movie) og:site_name = 속한 사이트의 이름 og:title = 페이지의 이름(제목) og:description = 페이지의 간단한 설명 og:image = 페이지의 대표 이미지 주소(URL) og:url = 페이지 주소(URL) 트위터..

JQuery - [ 기본 사용 ]

https://api.jquery.com/ JQuery API Document 참조 $('선택자').함수(); - $ 기호는 제이쿼리를 의미 - 선택자를 이용하여 원하는 HTML 요소를 선택하고 함수를 정의하여 선택 된 요소에 원하는 동작을 설정할 수 있다. // 태그[속성=값] $('input[type=text]').val('아이티윌'); // 태그[속성^=값] (값으로 시작하는 속성을 찾음) $('input[type=password]').val('1234'); $('input[type^=p]').val('12345678'); // first(처음) / last(끝) // odd(홀수) / even(짝수) $('tr:first').css('backgrou..

HTML - [ 핵심 요소(태그) / 전역 속성 ]

1. 핵심요소 HTML에서 자주 사용하는 핵심 요소들을 알아보자. : 블록 요소. 특별한 의미가 없는 구분을 위한 요소 ~ : 블록 요소. 제목을 의미하는 요소. 숫자가 작을수록 더 중요한 제목을 정의. : 블록 요소. 문장을 의미하는 요소. : 블록 요소. 순서가 필요없는 목록의 집합을 의미. (Unordered List) : 블록 요소. 목록(list) 내 각 항목(item) : 인라인 요소. 이미지를 삽입하는 요소. : 인라인 요소. 다른/같은 페이지로 이동하는 하이퍼링크를 지정하는 요소. : 인라인 요소. 특별한 의미가 없는 구분을 위한 요소. : 인라인 요소. 줄바꿈 요소. : 인라인 요소&블록 요소. 사용자가 데이터를 입력하는 요소. 왼쪽에서 오른쪽으로 수평으로 쌓이는 특징을 가지고 있지만 가..