[TIL]20210625

C언어

어제 코드업 기초100제를 마쳤지만, 백준으로 바로 넘어가기보단 웹개발을 공부하는 부스트코스에서 CS50이라는 컴퓨터과학 강의가 있길래 먼저 수강한다.

코드업에서는 당장에 써야하는 코드들을 이론적 설명없이 알려줬지만, CS50에서는 원론적인 개념들을 알려준다.

https://sandbox.cs50.io
1. terminal 에 clang 파일이름.c -> out 결과 파일 생성
2. terminal에 .\결과파일이름 -> 출력

• terminal에서 하는 것임으로 clang -o 출력될 이름 파일이름.c를 통해 a.out대신 다른이름 설정 가능.
  .
  이후에는 clang 대신 make 파일이름(확장자x)으로 컴파일 함.

= 할당 연산자

%~ 형식 지정자

#<stdio.h> 는 standard input out 의 약자.

c언어에서 함수 선언

파이썬에서는 def를 쓴 것 처럼 c에서는 void 함수명(void) { }로 선언할 수 있다.
만약 선언한 함수가 명령하는 코드보다 밑에 있다면 `void 함수명(void);을 맨 윗줄에 적어서 해결 할 수 있다.

void cough(void);

int main(void){
cough();
}

void cough(void){
printf("cough\n");
}

여기서 함수에 정수 인자를 전달하려고 하면
밑의 void cough(void)대신 void cough(int n) 로 바꾸고 위의 void cough(int)로 바꾸고, main 안에서 cough(3)를 하면 된다.

오버플로우

며칠 전 2진수관련되서 공부할때도 배웠지만 자신이 표현할 수 있는 숫자의 범위를 넘어가게 되면 이상한 결과가 나온다. 이는 항상 코딩할때 주의를 해야한다.

웹 공부

태그-폼

서버에 데이터를 전달하기 위한 요소들.

<input type="...">

type에는 text, password radio checkbox file image submit rest button등이 있다.

text

text 태그에는 placeholder 라는 속성이 존재.
사용자의 입력을 받기전 placeholder값을 먼저 노출시킨다. 입력을 받으면 바로 사라짐.

아이디: <input type="text" placeholder="영문입력">

이런 식으로 응용할 수 있다.

password

password의 경우 text와 유사하지만 입력값이 가려진다.

radio

radio는 라디오버튼이 나온다. 여러 개의 라디오버튼이 상호 배타적 관계를 가지게 만들려면 name 속성을 이용해 같은 성격의 radio 임을 명시해야한다.

성별:  남자<input type="radio" name="gender"> 여자<input type="radio" name="gender" > 

checkbox

checkbox는 중복선택이 가능하다는 특징외에는 radio와 비슷하다.

checked는 radio와 checkbox에 쓰이는 속성이다. boolean속성으로 기본적으로 체크가 된 상태로 보이도록 하는 속성이다.

file

file 태그는 파일들을 첨부할 때 사용한다.

submit 과 reset

submit은 제출 이라는 이름의 이름의 버튼을 만들고, 값이 서버로 전동되며 페이지가 리로드된다. reset은 초기화 라는 이름의 버튼을 만들고 페이지에 입력된 값들을 초기화 시킨다.

button

button은 단순히 버튼을 만든다.

submit과 reset, button은 value속성을 통해 표시되는 이름을 변경 할 수 있다.

image

submit 은 submit과 동일한 동작을 하지만 이름대신 이미지를 넣을 수 있다. 그러므로 이미지 관련 속성인 alt와 src, width, height 속성이 사용된다.

여기까지는 <input type="~~"> 를 이용한 태그들 이었다.

select

select태그는 몇개의 선택지를 삼각형 형태를 눌러 보고 선택을 하도록 만든다. 이 태그안에 option태그를 사용하여 선택지를 제공한다.

<select>
	<option> </select>
</select>

여기서 selected라는 속성을 줄 수 있는데, checked와 마찬가지로 속성을 준 값이 기본선택되도록 한다.

textarea

textarea는 사용자에게 여러줄의 텍스트를 입력받을 때 사용된다. 또한, cols속성으로 영문기준 한번에 몇글자까지 보이도록 설정할 수 있고, rows 속성을 영문기준 몇 줄까지 보이도록 설정할 수 있다. 또한 placeholder 속성또한 사용가능하다.

button

<button type="submit | reset | button"> 요소는 위의 언급된 <input type=" ">에서 쓰이는 것과 역할은 같지만 사뭇 다르다.
input타입은 빈 태그들이지만 button태그는 여는 태그와 닫는 태그가 포함된다. 이 태그는 스타일적에서 더 자유로운 표현이 가능하다.

label

label요소는 폼 요소와 연결해주기 위해 사용되며, 웹 접근성 향상에 도움이 됨으로 필수적으로 선언해야한다.
label요소의 for="xx"와 폼 요소의 id="xx"의 값이 동일해야 한다.

<label for="userid">아이디:</label><input type="text" id="userid">

위의 예시를 보자면 화면상에서는 label을 통해 폼요소과 연결시킨 것이 큰 차이는 없을지라도 label값인 아이디:를 클릭하면 연결된 폼요소를 클릭한 것과 같은 동작을 한다.

fieldset과 legend

fieldset은 여러 개의 모 요소를 그룹화하여 구조적을 만들기 위해 사용하며, legend는 fieldset으로 묶인 그룹의 이름을 지정하는 태그이다. 여기서 legend태그를 fieldset태그의 바로 밑에 선언해야한다는 점을 명심해야 한다.

<fieldset>
  <legend>기본 정보</legend>
</fieldset>
<fieldset>
  <legend>부가 정보</legend>
</fieldset>

이렇게 사용하고 밑의 예시를 보면

    <fieldset>    
    <legend>지역</legend>    
        <select>    
        <option>서울</option>
        <option>인천</option>
        <option>안산</option>
        <option>대구</option>

    </select><br>
</fieldset>
    <fieldset>
        <legend>제출탭</legend>
        <input type="submit" ><br>
        <button type="submit">제출</button>
    </fieldset>

결과는 이렇게 나온다.

form 태그

폼요소들을 크게 감싸주는 태그이다.
필요한 만큼의 요소를 form으로 감싸준다면 그때그때 필요한 값만을 서버에 전송할 수 있다.

<form action="..." method="..."
      ~~~
</form>

action은 폼데이터를 처리하기위한 서버의 주소를 입력한다.
method는 값을 전송할때의 방식을 지정한다.
이때의 값으로는 get과 post 이 두가지 속성이 있다.
get을 사용하면 action의 url의 뒤에 값들이 뒤따라 입력된다.
post는 전송시 url뒤에 값이 담겨지기 않음으로 민감한 정보를 다룰때 사용한다.

스택오버플로우에서 One big reason is that Get requests can remain in browser history and it has length restrictions. On the other hand, POST requests are not cached and can't be bookmarked. 라는 내용을 통해 보충설명이 된 것 같다.