* 웹 개발에서의 모듈이란?
-> 프로그램은 작고 단순한 것에서 크고 복잡한 것으로 진화한다. 그 과정에서 코드의 재활용성을 높이고,
유지보수를 쉽게 할 수 있는 다양한 기법들이 사용된다. ( 아주 좋은 부품을 만들어서 사용한다 생각하면 된다. )
그 중의 하나가 코드를 여러개의 파일로 분리하는 것이다. 이를 통해서 얻을 수 있는 효과는 아래와 같다.
1. 자주 사용되는 코드를 별도의 파일로 만들어서 필요할 때 마다 재활용할 수 있다.
2. 코드를 개선하면 이를 사용하고 있는 모든 애플리케이션의 동작이 개선된다.
3. 코드 수정 시에 필요한 로직을 빠르게 찾을 수 있다. ( 여기서 로직이란? )
로직 -> 프로그램을 만들 때의 논리적인 흐름.
프로그래밍 상에서의 로직이 과연 무엇일까?
* 로직이 충돌한다 = 논리적 흐름이 깨진다.
예를 들어 1부터 9까지 곱하는 결과를 가져오는 프로그램인데, 추가로 입력값을 더 받는다던지하면
원래 프로그램의 논리적 흐름과 충돌이 된다. 입력값을 하나만 받고 그 값에 1부터 9까지 곱해서 결과를
출력해주는건데 입력값이 하나 더 늘어났으니 전체 흐름이 바뀔 수 있는 것. 단순한 곱하기에서도 이런데
실제 프로그램이라면 작은 것 하나가 가져오는 결과의 차이는 매우 크다.
Logic ( 논리 ) , 어떤 흐름 ,
프로그래밍 논리라는 용어는 컴퓨터 과학의 발전에 뿌리를 두고 있다. 프로그래밍 로직은 정교한 알고리즘으로
컴파일 되고 프롤로그와 같은 프로그래밍 언어로 표현된 하드 및 빠른 로직으로 시작되었다.
이런거 됐고,ㅡ
로직 = 그것은 그렇다.
코딩 = 그것을 해본다.
알고리즘? 알고리즘은 또 뭔데. ( 영화에서도 진짜 매-우 많이 나오는 단어 )
알고리즘 ( 라틴어,독일어 : Algorithmus, 영어:algorithm )
-> 어떠한 문제를 해결하기 위한 여러 동작들의 모임.
수학과 컴퓨터 과학, 언어학 또는 관련 분야에서 어떠한 문제를 해결하기 위해 정해진 일련의 절차나
방법을 공식화한 형태로 표현한 것.
간단히 말하면, 알고리즘이란 어떤 일을 해결하려는 방법과 절차라고 할 수 있다.
알고리즘은 유한성을 가지며, 언젠가는 끝나야하는 속성을 가지고 있음.
알고리즘을 명시하는 목적 -> 컴퓨터 프로그래밍에서 사용하기 위함이 대다수,
-> 그럼 프로그래밍 언어로 대다수 작성하게 된다.
그래서 좋은 알고리즘이란, 효율성을 항상 고려해야 한다.
간단하게 -> 알고리즘이란 문제 해결을 위한 단계들을 체계적으로 명시한 것을 의미함.
알고리즘의 예시 -> 기초적 수한 연산, 라면 조리법, 하루 일정 계획, 집에서 회사로 가는 길 찾기 등 .. ( ㅇㅋ )
알고리즘 -> 집 가장 빨리 가는 방법
로직 -> 그건 그렇다
모듈 -> 모니터 받침대, 모니터암
모듈은 원래 건축물을 지을 때 기준으로 삼는 치수로 사용되었음.
module ( 특정 기능을 하는 컴퓨터 시스템이나 프로그램의 단위 )
-> 컴퓨터 시스템에서, 부품을 떼 내어 교환이 쉽도록 설계되어 있을 때의 각 부분.
그걸 ' 모듈 ' 이라고 함. 아 ㅇㅋ 이해됨.
다시, 본론으로 돌아와서.
Button 태그의 Default type은?
-> Button 태그는 클릭할 수 있는 버튼을 정의할 때 사용한다.
<button> 요소 안에는 텍스트나 이미지와 같은 콘텐츠를 삽입할 수 있지만,
input 요소를 사용한 버튼에는 이와 같은 콘텐츠를 삽입할 순 없습니다. ( 차이 )
브라우저별로 버튼 요소에 대해 서로 다른 기본 타입을 사용할 수 있으므로, 버튼 요소에는 언제나
type 속성값을 명시하는 것이 좋다.
<button type="button" onclick="alert('Hello World!')">클릭해 보세요!</button>
button 태그 속성 종류
autofocus -> 페이지가 로드될 때 자동으로 포커스가 버튼으로 이동됨을 명시
disabled -> 해당 버튼이 비활성화됨
form -> 해당 버튼이 포함될 하나 이상의 form 요소를 명시
formaction -> 폼 데이터가 서버로 제출될 때 해당 데이터가 도착할 URL을 명시
( 단, 버튼 요소의 타입 속성값이 submit 인 경우에만 사용할 수 있음 )
name -> 해당 버튼의 이름을 명시
type -> 해당 버튼의 타입을 명시
value -> 해당 버튼의 초기값을 명시
* 근데 버튼에 타입을 왜 쓰는거임?
ex ) <button type="button">버튼</button>
버튼이 버튼이지 왜 타입에 버튼을 넣어주는걸까?
-> 버튼에 타입이 있는게 디폴트값이 아니기 때문에 넣어주는거임.
버튼의 type 에는 3가지 값을 지정해줄 수 있는데, 각각 submit , reset, button 이 있다.
만약 아~무런 값도 안넣으면 기본 디폴트값은 button 이 아니라 " submit " 이 된다. ( submit, 제출 )
ex ) <button></button> = <button type="submit"></button>
그래서 form 태그 안에서 button 태그를 사용할 때 타입 명시가 없다면 기본적으로 button이 아닌 ' submit ' 처리가 일어나게 된다.
* ) form 안에서 버튼 클릭했을 때 새로고침이 되었던 기억 -> 바로 이것 때문.
이 때 버튼을 클릭하면 바로 페이지가 새로고침이 되었던 것이었음.
그래서 의미론적에서 보면 button = type button 이렇게 명시를 해주는 것이 좋음. ( 시멘틱 + IE 에서 문제 없도록 )
스크립트로 제어할 수 있다고 하더라도 모종의 이유로 브라우저 내 JS가 실행되지 않는 경우가 있을 수도 있음.
+ 마크업 측면에서도 버튼에 type submit이 있으면 역할 구분이 명확해짐.
) form 태그 내에 타입 명시 없는 버튼은 submit 으로 동작하므로 클릭시 새로고침이 되는 이슈가 있다.
) IE10 이하에서 form 밖의 input에서 엔터 입력은 submit 버튼과 연결된다.
* 자 그럼 input과의 차이는?
ex ) <input type="button" value="버튼"/>
인풋 태그에도 타입을 버튼으로 넣을 수 있다.
( HTML 4.0 표준부터 버튼 태그를 쓸 수 있었음 )
예전에는 버튼 태그가 없었음.
button 태그는 input 의 역할을 잇기 위해 나중에 추가된 태그라는 것임.
그래서 기능은 둘이 동일한데 활용성 면에서 큰 차이가 있다.
<form>
<input type="submit" value="버튼"/>
</form>
input은 열린 태그라서 자식요소를 가질 수 없다는 단점이 있음.
<form>
<button>
<img src="img/button.png" alt/>
<span>세련된 버튼</span>
</button>
</form>
하지만 이런 식으로 버튼은 자식태그를 가질 수 있고 CSS에서 가상 선택자로 꾸며주는 것도 가능하다.
input이 가진 한계를 넘어 다양한 이미지나 텍스트가 들어간 버튼을 표현할 수 있음. ( 이미지를 넣는 것도 가능하단 얘기 )
그래서 지금은 굳이 input type=button 을 사용할 필요가 없다. 이미 버튼이 있기 때문.
AIRA 속성이란?
새롭게 알게된 것. role = "button" 을 사용하면 지나가던 div도 버튼으로 만들어 버릴 수 있음. ( ARIA 속성 )
ARIA
role(역할) : 특정 요소에 역할정의, 사용자에게 정보제공, 부여한 역할 동적변경 불가.
ARIA 는 w3c 공식 스펙이고 HTML에 추가할 수 있는 속성임.
ARIA 는 화면 낭독기와 같은 보조 기술들에 접근성을 향상시켜주는 속성임.
3가지로 정의할 수 있음.
" 역할 " 을 의미하는 Role
" 속성 " 을 의미하는 Property
" 상태 " 를 정의하는 State
역할은 이제 UI에 특정 컴포넌트를 정의하는거고
속성은 해당 컴포넌트에 속성명으로 aria-xx 라는 접두사를 사용하게 된다.
상태는 해당 컴포넌트의 상태 정보를 정의해줌.
* 예시?
ROLE => <a href="#" role="button">팝업</a>
Property -> <label for="id">아이디>/label>
<input type="text" id="id" aria-required="true">
a요소로 굳이 롤을 버튼으로? -> 그냥 버튼으로 쓰면 되지.
아리아를 사용하는 것보단 우선 올바르고 의미있는 HTML 요소를 사용하는 것을 목표로 작업해야함!
구역을 나타내는 요소 -> 랜드마크.
메인요소, 네브, 푸터, -> 랜드마크 요소라고 한다.
아리아에서는 롤이라는 속성으로 랜드마크를 정의함.
롤에 값으로 랜드마크가 존재.
html 요소로 랜드마크를 정의하고, 아리아에 기법인 롤을 활용해서 정의하는 것은 좋은 방법이 아님.
아리아 = 접근성 보완하는 방법일 뿐임.
네브에 롤에 네비게이션을 줄 필요는 없다는 말.
role = region ( 섹션과 동일한 의미 )
role = application ( div와 같은 의미 내포 )
complementary ( aside와 같은 의미 )
rol = search ( HTML에서 제공하고있지 않음x. 검색의 역할을 담당하는 서식역할을 의미함. div또는 form으로 대신해서 사용 권장 )
rol = contentinfo ( HTML에서 footer와 같은 의미 )
해당 값은 아티클, aisde, 메인, 네비 섹션요소등의 자격으로 사용하면 안됨.
* 문장에 취소선을 넣고싶을 때 어떤 태그를 사용하는가?
-> 취소선을 넣고 싶을 땐 <del> 태그를 사용하면 된다.
밑줄을 넣고 싶을 땐 <ins> 태그를 사용하면 된다.
* section 태그와 article 태그의 차이점이 무엇인가?
-> article 태그는 내용이 각기 독립적이고, 홀로 설 수 있는 내용을 담는다.
주로 블로그 글, 포럼 글, 뉴스 기사 등을 article로 묶을 수 있다.
-> section 태그는 서로 관계 있는 문서를 분리하는 역할을 함.
주로, 문서를 다른 주제로 구분짓기 위해 사용됨.
* 그래서 무슨 차인데?
아티클 역시 섹션처럼 " 문서를 분리 " 하는 역할이므로 비슷하긴 하다.
그리고 섹션은 div와 자주 혼동이 되는데 어떻게 구분하는 것이 나을까?
1. 내용이 독립적 " 혼자 살 수 있는 자취생 " 이면 아티클을 사용.
2. 내용이 서로 관계가 있다면 " 독립과 연결성 " section ( ex. section2 section3 section4 . . . )
3. 의미적으로 관계가 없다면 div 를 사용 ( div는 오직 내용을 묶는 역할을 한다. )
아티클은 스스로 자취할 수 있다는 점에서 섹션보단 좀 더 구체적인 의미를 지님.
여러 개의 섹션을 아티클로 묶을 수 있고,
마찬가지로 여러개의 아티클을 섹션으로 묶을 수 있음.
아티클의 예시 ex ) 웹 블로그에서의 글, 포럼에서의 포스팅 또는 코멘트, 뉴스기사, 논평,
( 정적인 콘텐츠 페이지를 나타냄 )
아티클 요소는 섹션 요소와 조금 더 시멘틱한 성향을 가지고 있음.
article -> 해당 컨텐츠 영역은 페이지에서 " 독립적 " 인 내용을 담고 있음.
해당 부분을 따로 떼어서 다른 페이지로 이동해요 그 영역 속 내용 만으로 온전히 하나의 기사가 될 수 있음.
section -> body 영역 안에 적어도 하나 이상의 section이 존재 해야함. 일종의 한 팀의 역할.